angularjs - 阻止 Angular 动画在 ng-show/ng-hide 上发生

Question

在我的 AngularJS 应用程序中，我使用 fontawesome 来加载旋转器:

<i class="fa fa-spin fa-spinner" ng-show="loading"></i>

我还使用 AngularToaster 来发送依赖于 ngAnimate 的通知消息。当我在 AngularJS 应用程序中包含 ngAnimate 时，它​​会以一种奇怪的方式对加载旋转器进行动画处理，从而弄乱了它们。我想阻止这种情况发生，但找不到一种方法来禁用这些加载器上的动画(必须更新我的应用程序中的每个加载器也会很糟糕)。

这是一个 plunkr，显示了我的具体问题。

http://plnkr.co/edit/wVY5iSpUST52noIA2h5a

Answer 1

我认为最好的方法是使用 $animateProvider.classNameFilter ，它允许您过滤要制作动画的项目，或者在本例中不制作动画。我们会做类似的事情:

 $animateProvider.classNameFilter(/^((?!(fa-spinner)).)*$/);
 //$animateProvider.classNameFilter(/^((?!(fa-spinner|class2|class3)).)*$/);

演示:

http://plnkr.co/edit/lbqviQ87MQoZWeXplax1?p=preview

Angular docs状态:

Sets and/or returns the CSS class regular expression that is checked when performing an animation. Upon bootstrap the classNameFilter value is not set at all and will therefore enable $animate to attempt to perform an animation on any element. When setting the classNameFilter value, animations will only be performed on elements that successfully match the filter expression. This in turn can boost performance for low-powered devices as well as applications containing a lot of structural operations.

作为带有 no-animate 指令的评论的另一个答案，您可以编写一个 ng-show 指令，该指令将以更高的优先级运行并禁用动画。仅当元素具有 fa-spinner 类时我们才会执行此操作。

  problemApp.directive('ngShow', function($compile, $animate) {
    return {
      priority: 1000,
      link: function(scope, element, attrs) {

        if (element.hasClass('fa-spinner')) {
          // we could add no-animate and $compile per 
          // http://stackoverflow.com/questions/23879654/angularjs-exclude-certain-elements-from-animations?rq=1
          // or we can just include that no-animate directive's code here
          $animate.enabled(false, element)
          scope.$watch(function() {
            $animate.enabled(false, element)
          })

        }
      }
    }
  });

演示:http://plnkr.co/edit/BYrhEompZAF5RKxU7ifJ?p=preview

最后，与上面类似，如果我们想让它更加模块化，我们可以使用 no-animate 指令。在本例中，我将指令命名为 faSpin，您可以在上面的答案中执行此操作。这本质上是相同的，只是我们保留了上述代码集注释中提到的 SO 答案中的指令。如果您只关心 fa-spin 动画问题，这种命名方式效果很好，但如果您有其他 ng-show 动画问题，您需要将其命名为 ngShow 并添加到 if 子句。

  problemApp.directive('noAnimate', ['$animate',
    function($animate) {
      return {
        restrict: 'A',
        link: function(scope, element, attrs) {
          $animate.enabled(false, element)
          scope.$watch(function() {
            $animate.enabled(false, element)
          })
        }
      };
    }
  ])

  problemApp.directive('faSpin', function($compile, $animate) {
    return {
      priority: 1000,
      link: function(scope, element, attrs) {

        if (element.hasClass('fa-spinner')) {
          element.attr('no-animate', true);
          $compile(element)(scope);

        }
      }
    }
  });

演示:http://plnkr.co/edit/P3R74mUR27QUyxMFcyf4?p=preview