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

【问题标题】：Angular initial transition of ng-show, using $timeout and $compileng-show 的 Angular 初始转换，使用 $timeout 和 $compile
【发布时间】：2018-01-11 05:50:11
【问题描述】：

我有一个使用$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>

【问题讨论】：

你想达到什么目的？如果我加载页面，复选框是否可见？如果你只是设置 scope.checked = true;它将是可见的，并且不会播放虚假动画

标签： javascript css angularjs css-transitions ng-animate

【解决方案1】：

一个选项是通过将 ng-hide 类添加到 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

【讨论】：

这并没有为我解决问题。我想是因为使用了ng-cloak css
我不确定您的意思，如果您不希望在渲染页面时显示 div，这可以解决问题吗？不是吗？ :-)
在我提供的示例中，它是在页面呈现时，但在我的服务中，我在页面呈现后一点点附加元素

【解决方案2】：

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

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);
    }
  }))

【讨论】：

很聪明，解决了页面渲染和页面渲染后的问题。