阻止角度动画在ng-show/ng-hide上发生

Question

在我的AngularJS应用程序中,我使用fontawesome作为我的加载微调器:

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

我也使用AngularToaster来获取依赖于ngAnimate的通知消息.当我在我的AngularJS应用程序中包含ngAnimate时,它通过以奇怪的方式设置动画来扰乱我的加载旋转器.我想阻止这种情况发生,但是无法找到一种方法来禁用这些加载器上的动画(它也很难更新我的应用程序中的每个加载器).

下面是一个傻瓜,显示我的确切问题.

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声明:

设置和/或返回执行动画时检查的CSS类正则表达式.在bootstrap时,classNameFilter值根本没有设置,因此将启用$ animate尝试在任何元素上执行动画.设置classNameFilter值时,仅对成功匹配过滤器表达式的元素执行动画.这反过来可以提高低功耗设备以及包含大量结构操作的应用程序的性能.

作为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

Answer 2

我有一个类似的问题,即使在关闭$ scope变量之后,我的图标将一直旋转直到动画结束.对我<i>有用的是将fa-icon元素包裹在一个范围内.

<span ng-if="loading"><i class="fa fa-refresh fa-spin"></i></span>

试试吧!

Answer 3

我找到了一种更简单的方法.

<i class="fa fa-spinner" ng-show="loading" ng-class="{'fa-spin' : loading}"></i>

叉式挖掘机:http://plnkr.co/edit/mCsw5wBL1bsLYB7dCtQF

我做了另外一个小问题,因为如果旋转超过2秒,图标就会显得不合适,但这是由'ng-hide-add-active'类引起的,所以我只是在我的CSS中添加:

.fa-spinner.ng-hide-add-active {
    display: none !important;
}

并且照顾它.

编辑:Nico的解决方案是一个稍微清洁的版本,所以我考虑使用他的.