angularjs – 停止角动画从ng-show/ng-hide发生

发布时间：2020-12-17 08:45:25 所属栏目：安全来源：网络整理

导读：在我的AngularJS应用程序中，我使用fontawesome为我的加载旋转： i class="fa fa-spin fa-spinner" ng-show="loading"/i 我也使用AngularToaster的通知消息依赖于ngAnimate。当我在我的AngularJS应用程序中包含ngAnimate时，它通过以奇怪的方式动画化它们来

在我的AngularJS应用程序中，我使用fontawesome为我的加载旋转：

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

我也使用AngularToaster的通知消息依赖于ngAnimate。当我在我的AngularJS应用程序中包含ngAnimate时，它通过以奇怪的方式动画化它们来混乱我的加载旋转。我想阻止这种情况发生，但没有找到一个方法来禁用只是这些装载器的动画(它也会臭了，必须更新我的应用程序中的每个加载器)。

显示我的确切问题。

http://plnkr.co/edit/wVY5iSpUST52noIA2h5a

我认为最好的方法是使用$ 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',attrs) {
          $animate.enabled(false,element)
          })
        }
      };
    }
  ])

  problemApp.directive('faSpin',attrs) {

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

        }
      }
    }
  });

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!