禁用某些元素的nganimate
我正在使用ngAnimate模块，但是所有的ng-if ， ng-show等等都受到这个影响，我想用一些选定的元素来使用ngAnimate。 对于性能和显示和隐藏非常快速的元素中的一些错误。
谢谢。
只需将其添加到您的CSS。 如果这是最后的规则，最好：
.no-animate { -webkit-transition: none !important; transition: none !important; }
然后为要禁用的元素的类添加no-animate 。 例：
<div class="no-animate"></div>
如果要为特定元素启用animation（而不是为特定元素禁用它们），则可以使用$ animateProvider将具有特定类名（或正则expression式）的元素configuration为animation。
下面的代码将为具有angular-animate类的元素启用animation：
var myApp = angular.module("MyApp", ["ngAnimate"]); myApp.config(function($animateProvider) { $animateProvider.classNameFilter(/angular-animate/); })
以下是包含angular-animate类以启用animation的示例标记：
<div ng-init="items=[1,2,3,4,5,6,7,8,9]"> <input placeholder="Filter with animations." ng-model="f" /> <div class="my-repeat-animation angular-animate" ng-repeat="item in items | filter:f track by item" > {{item}} </div> </div>
从这个博客中借用和修改的Plunker示例，其中只有第一个filter具有animation（由于具有angular-animate类）。
请注意，我使用angular-animate作为示例，它可以使用.classNameFilter函数完全configuration。
有两种方法可以在AngularJS中parsinganimation，如果你有模块ngAnimate作为你的模块的依赖：
-
在$ animate服务中全局禁用或启用animation：
$animate.enabled(false); -
禁用特定元素的animation – 这必须是该angular的元素将添加animationstate css类（例如ng-enter，…）！
$animate.enabled(false, theElement);
从Angular 1.4开始，你应该改变参数：
$animate.enabled(theElement, false);
$animate文档： https ： //docs.angularjs.org/api/ng/service/ $ animate
谢谢，我写了一个指令，你可以放在元素上
CoffeeScript的：
myApp.directive "disableAnimate", ($animate) -> (scope, element) -> $animate.enabled(false, element)
JavaScript的：
myApp.directive("disableAnimate", function ($animate) { return function (scope, element) { $animate.enabled(false, element); }; });
要禁用某些元素的ng-animate，使用遵循Angular animate范例的CSS类，可以configurationng-animate以使用正则expression式来testing类。
configuration
var myApp = angular.module("MyApp", ["ngAnimate"]); myApp.config(function($animateProvider) { $animateProvider.classNameFilter(/^(?:(?!ng-animate-disabled).)*$/); })
用法
只需将ng-animate-disabled类添加到您想要被ng-animate忽略的任何元素。
信用 http://davidchin.me/blog/disable-nganimate-for-selected-elements/
我发现$animate.enabled(false, $element); 将适用于使用ng-show或ng-hide的元素，但不适用于使用ng-if元素。 我最终使用的解决scheme是在CSS中完成所有的工作，我从GitHub上的这个线程学到了这些 。
CSS
/* Use this for transitions */ .disable-animations.ng-enter, .disable-animations.ng-leave, .disable-animations.ng-animate { -webkit-transition: none !important; transition: none !important; } /* Use this for keyframe animations */ .disable-animations.ng-animate { -webkit-animation: none 0s; animation: none 0s; }
SCSS
.disable-animations { // Use this for transitions &.ng-enter, &.ng-leave, &.ng-animate { -webkit-transition: none !important; transition: none !important; } // Use this for keyframe animations &.ng-animate { -webkit-animation: none 0s; animation: none 0s; } }
我有一个列表，第一个li是使用ng-hide="$first" 。 使用ng-enter结果在显示li前消失半秒钟。
基于Chris Barr的解决scheme，我的代码现在看起来像这样：
HTML
<ol> <li ng-repeat="item in items" ng-hide="$first" ng-class="{'no-animate' : $first}"> </li> </ol>
CSS
.no-animate.ng-enter, .no-animate.ng-leave, .no-animate.ng-animate { transition: none !important; /* disable transitions */ animation: none 0s !important; /* disable keyframe animations */ } li.ng-enter { opacity: 0; transition: opacity 0.3s ease-out; } li.ng-enter-active { opacity: 1; } /* I use Autoprefixer. If you don't, please include vendor prefixes. */
我不想在我的ng-if上使用ngAnimate，所以这将是我的解决scheme：
[ng-if] { .ng-enter, .ng-leave, .ng-animate { -webkit-transition: none !important; transition: none !important; } }
只是张贴这是另一个build议！
