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变量之后，我的图标会一直旋转直到动画结束。对我有用的是将Cursor cursor=arg0.getItemAtPosition(position); Expence row ; if (cursor.moveToFirst()) { do { // do what you need with the cursor here row=new Expence(<ID>); row.setCategory(cursor.getString(cursor.getColumnIndex("Category"))); ... Do same for other } while (cursor.moveToNext()); } fa-icon元素包装在一个范围内。

<i>

试试吧！

Answer 3

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

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

Forked plunker：http://plnkr.co/edit/mCsw5wBL1bsLYB7dCtQF

我确实遇到了另一个小问题，因为如果旋转超过2秒，图标就会显得不合适，但这是由'ng-hide-add-active'类引起的，所以我刚加入我的CSS：

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

并且照顾它。

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

Answer 4

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>

Answer 5

更新James Fiala Answer。

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

您不需要@James Fiala答案中提到的ng-class。但是你应该将fa-spin作为其中一个。

添加样式

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

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

5 个答案:

添加样式