问题:

I'm using the ngAnimate module, but all my ng-if, ng-show, etc, are affected by that, I want to leverage ngAnimate for some selected elements. For performance and some bugs in elements that shows and hide very speedy.

thanks.

回答1:

Just add this to your CSS. It is best if it is the last rule:

.no-animate {    -webkit-transition: none !important;    transition: none !important; }

then add no-animate to the class of element you want to disable. Example:

回答2:

If you want to enable animations for specific elements (as opposed to disabling them for specific elements) you can use the $animateProvider to configure elements with a particular class name (or regex) to animate.

The code below will enable animations for elements that have the angular-animate class:

var myApp = angular.module("MyApp", ["ngAnimate"]); myApp.config(function($animateProvider) {   $animateProvider.classNameFilter(/angular-animate/); })

Here is example markup that includes the angular-animate class to enable animations:

            {{item}}

Plunker example borrowed and modified from this blog where only the first filter has animations (due to having the angular-animate class).

Please note that I'm using angular-animate as an example and it is completely configurable using the .classNameFilter function.

回答3:

There are two ways you can disbale animations in AngularJS if you have the module ngAnimate as a dependency on your module:

Disable or enable the animation globally on the $animate service:
```
$animate.enabled(false);
```
Disable the animations for a specific element - this must be the element for that angular will add the animationstate css classes (e.g. ng-enter, ...)!
```
$animate.enabled(false, theElement);
```

As of Angular 1.4 version you should reverse the arguments:

$animate.enabled(theElement, false);

Documentation for $animate: https://docs.angularjs.org/api/ng/service/$animate

回答4:

thanks, i wrote a directive which you can place on the element

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);     }; });

回答5:

To disable ng-animate for certain elements, using a CSS class, which follows Angular animate paradigm, you can configure ng-animate to test the class using regex.

Config

    var myApp = angular.module("MyApp", ["ngAnimate"]);     myApp.config(function($animateProvider) {         $animateProvider.classNameFilter(/^(?:(?!ng-animate-disabled).)*$/);     })

Usage

Simply add the ng-animate-disabled class to any elements you want to be ignored by ng-animate.

Credit http://davidchin.me/blog/disable-nganimate-for-selected-elements/

回答6:

I've found that $animate.enabled(false, $element); will work for elements that use ng-show or ng-hide but it will not work for elements that use ng-if for some reason! The solution I ended up using was to just do it all in CSS, which I learned from this thread on 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 {

标签

animate