<i class="fa fa-spin fa-spinner" ng-show="loading"></i>
我也使用AngularToaster的通知消息依赖于ngAnimate。当我在我的AngularJS应用程序中包含ngAnimate时，它通过以奇怪的方式动画化它们来混乱我的加载旋转。我想阻止这种情况发生，但没有找到一个方法来禁用只是这些装载器的动画(它也会臭了，必须更新我的应用程序中的每个加载器)。
显示我的确切问题。
$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);
}
}
}
});
