45

在我的 AngularJS 应用程序中，我使用 fontawesome 来加载微调器：

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

我还在使用 AngularToaster 来处理依赖于 ngAnimate 的通知消息。当我在我的 AngularJS 应用程序中包含 ngAnimate 时，它​​会以一种奇怪的方式为它们设置动画，从而弄乱我的加载微调器。我想阻止这种情况发生，但无法找到一种方法来禁用这些加载器上的动画（如果必须更新我的应用程序中的每个加载器也会很臭）。

这是一个显示我的确切问题的 plunkr。

http://plnkr.co/edit/wVY5iSpUST52noIA2h5a

4

5 回答 5

59

我认为最好的方法是使用$animateProvider.classNameFilterwhich 将允许您过滤项目以进行动画处理，或者在这种情况下不进行动画处理。我们会做类似的事情：

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

演示：

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

角度文档状态：

设置和/或返回执行动画时检查的 CSS 类正则表达式。在引导时，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

于 2014-07-08T13:25:30.803 回答
41

我有一个类似的问题，我的图标会一直旋转直到动画完成，即使在 $scope 变量关闭之后也是如此。对我有用的是将<i>fa-icon 元素包装在一个跨度中。

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

试试看！

于 2015-10-27T04:07:43.067 回答
18

我找到了一个更简单的方法。

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

分叉的 plunker：http ://plnkr.co/edit/mCsw5wBL1bsLYB7dCtQF

由于这样做，我确实遇到了另一个小问题，如果图标旋转超过 2 秒，图标会出现位置不正确，但这是由“ng-hide-add-active”类引起的，所以我只是在我的CSS中添加：

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

然后就解决了。

编辑： Nico 的解决方案是一个稍微干净的版本，所以我会考虑使用他的。

于 2015-04-20T19:13:22.317 回答
3 
angular.module('myCoolAppThatIsAwesomeAndGreat')
  .config(function($animateProvider) {

    // ignore animations for any element with class `ng-animate-disabled`
    $animateProvider.classNameFilter(/^((?!(ng-animate-disabled)).)*$/);

  });

然后，您可以将类添加ng-animate-disabled到您想要的任何元素。

<button><i class="fa fa-spinner ng-animate-disabled" ng-show="somethingTrue"></i></button>

于 2015-10-17T00:07:25.263 回答
0

更新James Fiala 答案。

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

您不需要@James Fiala Answerng-class中提到的。但你应该有作为类之一。fa-spin

添加样式

.fa-spinner.ng-hide-add-active {
   display: none !important;
}
于 2017-02-05T13:53:50.097 回答