Angular ng-show 的初始转换，使用 $timeout 和 $compile

Question

我有一项服务使用 $compile 将一些 HTML 附加到 DOM。这个 HTML 包含一个 ng-show，带有用于显示和隐藏的转换，并且它以假条件开始。问题是当它附加到 DOM 时，它会显示隐藏过渡。我怎样才能避免它？我注意到我的控制器在 $timeout 中调用此服务，然后才发生不希望的转换。

https://plnkr.co/edit/og0wrp6rZ65StXbufqLI?p=preview

angular
  .module('app', ['ngAnimate'])
  .directive('compileNgShowAnimation', ($timeout, $compile) => ({
    restrict: 'E',
    link: (scope, element) => {
      $timeout(() => {
        angular
          .element(element)
          .append($compile(`
            <div>
              Show: 
              <input type="checkbox" ng-model="checked" aria-label="Toggle ngShow">
              <br />
              <div 
                class="check-element animate-show-hide"  
                ng-show="checked">
                I should show up only when the checkbox is checked.
              </div>
            </div>
          `)(scope))
      })
    }
  }))

.animate-show-hide.ng-hide {
  /*transform: translate3d(0,-100%, 0);*/
  opacity: 0;
}

.animate-show-hide:not(.ng-hide) {
  /*transform: translate3d(0,0, 0);*/
  opacity: 1;
}

.animate-show-hide.ng-hide-add,
.animate-show-hide.ng-hide-remove {
  transition: all linear 0.5s;
}

.check-element {
  border: 1px solid black;
  padding: 10px;
}

/*
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script>
<body ng-app="app">

  <compile-ng-show-animation></compile-ng-show-animation>
  
</body>

Answer 1

您可以使用标志在一段时间后应用 class，如下所示：

angular
  .module('app', ['ngAnimate'])
  .directive('compileNgShowAnimation', ($rootScope, $compile, $document, $timeout) => ({
    restrict: 'E',
    link: (scope, element) => {
      $timeout(() => {
        scope.checked = false;
        scope.animate = false;

        angular
          .element(element)
          .append($compile(`
            <div>
              Show: 
              <input type="checkbox" ng-model="checked" aria-label="Toggle ngShow">
              <br />
              <div class="check-element {{animate ? 'animate-show-hide':''}}" ng-show="checked">
                I should show up only when the checkbox is checked.
              </div>
            </div>
          `)(scope))
      });
      $timeout(() => {

        scope.animate = true;
      },10);
    }
  }))

Answer 2

一个选项是通过将 ng-hide class 添加到 div 来确保该元素默认隐藏：

<div class="check-element animate-show-hide ng-hide" ng-show="checked">
     I should show up only when the checkbox is checked.
</div>

那你就不会得到短暂的可见度

https://plnkr.co/edit/Ik3BflLHwu3DXglOMOhX?p=preview

Angular ng-show 的初始转换，使用 $timeout 和 $compile

Angular initial transition of ng-show, using $timeout and $compile

javascript

css

css-transitions

angularjs

ng-animate