Disable ng-animate globally and then enable on some elements

Question

Using Angular 1.5.3, is it possible to globally disable ng-animate and then selectively enable it on some elements?

I have a directive (ng-animate-enabled) used to enable ng-animate on the container div and it's children.

If I globally disable ng-animate in the controller via $animate.enabled(false), the animations no longer work even though I am specifically enabling them via the directive mentioned above.

This jsfiddle illustrates the problem.

Thanks!

Answer 1

The easiest way to do this is to use $animateProvider.classNameFilter(). This lets you selectively enable ngAnimate for certain elements based on a HTML class (or more specifically, a regular expressions that is checked against the class). This eliminates the need to have a specific directive for enabling ngAnimate, and can give your application a significant performance boost. In your case, I'd do:

// Note that that the function takes a regular expression, not a string!
// Don't put quotes around it, use forward slashes!
$animateProvider.classNameFilter(/ng-animate-enabled/);

Which would enable ngAnimate for any elements with the ng-animate-enabled class.

For more information, I'd recommend reading Ben Nadel's blog post on the topic.