禁用某些元素的nganimate

我正在使用ngAnimate模块,但是所有的ng-ifng-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作为你的模块的依赖:

  1. 在$ animate服务中全局禁用或启用animation:

     $animate.enabled(false); 
  2. 禁用特定元素的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-showng-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议!