2

作为标题，请看这个小提琴：

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 元素中应用了该指令，所以在第一次加载页面时所有项目都具有高亮效果（闪烁一次）。我怎样才能在没有太多技巧的情况下跳过这个效果（理想情况下，一切都在指令内完成）

4

4 回答 4

0

有趣的是，我不确定是否有一个简单、干净的解决方案。似乎 ngRepeatDirective 的构建不关心中继器是第一次运行还是只是将新项目添加到列表中。因此，它不会让您根据具体情况采取不同的行动。AngularUI 的 ui-animate 指令似乎也不能解决这个问题，所以我不确定这在不诉诸讨厌的超时的情况下现在是否可行。

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

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

于 2013-02-22T08:04:03.267 回答
0

我会查看刚刚在1.1.14 版本中发布的 Angular 内置动画。这是一篇关于新功能的精彩文章：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

于 2013-04-13T15:10:06.780 回答
0

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

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

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

于 2013-02-24T04:20:13.590 回答
0

我在使用 angular 1.4.9 时遇到了同样的问题。我不希望第一次发生 ng-repeat 动画。我发现完成这项工作的唯一方法是在 ng-repeat 父级上有一个自定义指令并在短时间内禁用动画：

(function (){
  'use strict';

  angular
    .module('directives')
    .directive('disableLoadingAnimation', disableLoadingAnimation);

  function disableLoadingAnimation($animate, $timeout) {
    var directive = {
      link: link,
      restrict: 'A'
    };
    return directive;

    function link(scope, element) {
      $animate.enabled(element, false);
      $timeout(function (){
        $animate.enabled(element, true);
      }, 1000);
    }
  }
})();

HTML

<table disable-loading-animation>
   <tr ng-repeat="line in lines">...</tr>
</table>

我不喜欢我必须设置 1000 毫秒延迟的事实，但这是迄今为止我发现的更清洁的方式。

于 2016-02-05T14:28:43.037 回答