Angular JS:暂时禁用指令提供的动画，这样页面加载时就不会动画了？

Question

作为标题，请参阅此小提琴：

http://jsfiddle.net/goodwill/ezNuj/

我用下面的代码添加了一个指令：

myApp.directive('ngFadeIn', function() {
  return function(scope, element, attr) {
    if (element.is('tr, tbody')) {
      element.find('td').effect("highlight", {}, 500);
    } else {
      element.effect("highlight", {}, 500);
    }
    return scope.destroy = function(complete) {
      return element.fadeOut(500, function() {
        if (complete) {
          return complete.apply(scope);
        }
      });
    };
  };
});

我遇到的问题是，当第一次加载页面时，因为我在ng-repeat元素中应用了指令，所以当页面第一次加载时，所有的项都会高亮显示(闪烁一次)。我怎样才能跳过这个效果而没有太多的hack (理想情况下，在指令中做的所有事情)

Answer 1

有趣的是，我不确定是否有一个简单，干净的解决方案。ngRepeatDirective似乎并不关心中继器是第一次运行，还是只是在列表中添加新项。因此，它不会让您根据这一点采取不同的操作。AngularUI的ui-animate指令似乎也没有解决这个问题，所以我不确定如果不求助于讨厌的超时，现在是否可行。

您可以做的是修改ngRepeatDirective以检查类似ng-repeat-finished属性的内容，并在中继器完成后执行该属性。然后，添加逻辑以避免在第一个中继器上出现动画应该是微不足道的。

顺便说一句，你不应该用ng前缀来命名你的指令，因为这是Angular内部使用的。您应该为您的应用程序提供自己的前缀。

Answer 2

如果我们可以确定页面第一次完成呈现的时间，那么我们可以在服务或rootScope上设置一些属性，您的指令可以注入这些属性，因此可以检查该属性以确定是否应用动画。

不幸的是，似乎没有一种方法来确定页面何时完成呈现。请参阅AngularJS - How to query the DOM when directive rendering is complete，它解决了同样的问题。

我能想到的唯一解决办法是创建另一个指令(在页面上使用一次)，该指令将使用$timeout来简单地延迟1秒左右，然后执行我上面提到的操作:在服务或rootScope上设置一些属性。您的fadeIn指令将$watch该属性/变量，并且当值发生变化时，它可以设置一些允许或阻止动画的本地属性/布尔/标志。

Answer 3

我会看看angular刚刚在version 1.1.14中发布的内置动画。这是关于新特性的一篇很棒的文章：Animation in AngularJS。特别是，我会查看“有条件地启用/禁用动画”部分。在他们的网站上：

JS：

//turn on the animation
$scope.myAnimation = { enter: 'cool-enter', leave: 'cool-leave' };

//change the animation
$scope.myAnimation = { enter: 'uncool-enter', leave: 'uncool-leave' };

//remove the animation
$scope.myAnimation = null;

HTML：

<div data-some-directive data-ng-animate="myAnimation"></div>

再次注意，这需要当前不稳定版本的angular js 1.1.14