disable nganimate for some elements

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:

<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 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.

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.

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:

<div class="no-animate"></div>

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/

disable nganimate for some elements

Related

Recent Posts