停止在ng-show / ng-hide上发生的Angularanimation
在我的AngularJS应用程序中，我使用fontawesome作为我的加载debugging器：
<i class="fa fa-spin fa-spinner" ng-show="loading"></i> 我还使用AngularToaster来处理对ngAnimate有依赖性的通知消息。 当我在AngularJS应用程序中joinngAnimate的时候，它会以怪异的方式animation我的加载旋钮。 我想阻止这种情况的发生，但无法find一种方法来禁用这些装载机上的animation（它也臭得更新我的应用程序中的每一个装载机）。
这里是一个显示我的确切问题的小人物。
我认为这样做的最好方法是使用$animateProvider.classNameFilter ，这将允许您过滤项目animation或在这种情况下不animation。 我们会做这样的事情：
$animateProvider.classNameFilter(/^((?!(fa-spinner)).)*$/); //$animateProvider.classNameFilter(/^((?!(fa-spinner|class2|class3)).)*$/);
演示：
http://plnkr.co/edit/lbqviQ87MQoZWeXplax1?p=preview
Angular docs说：
设置和/或返回执行animation时检查的CSS类正则expression式。 在引导时，classNameFilter值根本就没有设置，因此将启用$ animate来尝试对任何元素执行animation。 当设置classNameFilter值时，animation将只在成功匹配filterexpression式的元素上执行。 这反过来可以提高低功率器件的性能以及包含许多结构操作的应用。
作为根据no-animate指令的注释的另一个答案，你可以编写一个ng-show指令，它将以更高的优先级运行并禁用animation。 如果元素具有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-spinanimation的问题，这种方式很好用，但是如果你有其他的ng-showanimation问题，你可以把它命名为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
我有一个类似的问题，即使在$ scopevariablesclosures之后，我的图标仍然会一直旋转，直到animation结束。 对我来说，工作是将一个跨度中的<i> fa-icon元素封装起来。
<span ng-if="loading"><i class="fa fa-refresh fa-spin"></i></span>
尝试一下！
我find了一个更简单的方法。
<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; }
并照顾它。
编辑：尼科的解决scheme是这个稍微干净的版本，所以我会考虑使用他的。
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>
更新詹姆斯Fiala答案 。
<i class="fa fa-spinner fa-spin" ng-show="loading"></i>
你不需要像@James Fiala所提到的ng-class 。 但是你应该把fa-spin作为一个class级。
添加样式
.fa-spinner.ng-hide-add-active { display: none !important; }
