disable nganimate for some elements

Question

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.

Answer 1

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.

Answer 2

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

1. Disable or enable the animation globally on the $animate service:

   $animate.enabled(false); 

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