Support enabling animations on specific elements even when $animate is disabled globally

[deakster]

Currently, disabling $animate globally will not allow animations to be re-enabled on a per-element basis.

This prevents the implementation of "opt-in" animation directives to selectively enable animation where desired.

Based on discussion from #5283

[mhevery]

I think a bette way to solve this is to have an API in ngAnimate which would mark which CSS class names are for animation. By default the API would be set to /.*/ (meaning all classes could trigger animation) If you would want to support animation only on some classes one could assume that all CSS rules would end with -animate in which case /-animate/ regexp would limit it to just those classes. This would short circuit the lookup mechanism.

Having a global off switch and then local override switches seems rather strange, and confusing. Off means off.

[matsko]

@mhevery great idea!

[deakster]

Sounds good to me, as long as the regex can be changed any time during runtime, with the elements adapting accordingly, i.e. elements that weren't animating before could potentially animate from now on, and ones that were animating before may stop animating from now on.

What I am thinking of is situations where you might want to change animation settings based on user options, or device detection (mobile vs pc). For example, let users turn animations to 'high', 'low' or 'off' in settings.

Then I could class some of my animations using -animate-high or -animate-low, and a 'high' setting could have the regex '-animate-' (which would capture all animations), while the 'low' setting could have the regex '-animate-low' which would only enable the "low" animations.

Edit: Although having said that, that functionality could be achieved other ways too, like ngClass binding -animate classes based on settings.

[matsko]

Let's make it simple for now and if requested then let's plan something better.

PS. Media queries could also work.

[deakster]

Yea sounds good.

With regards to controlling animations, media queries will not work for me. I just tested some of the apps I'm working on on tablets (including my Nexus 10, Chrome), and most of the animations look awful, like they are running at 2 frames per second, it makes the whole app feel sluggish/bottlenecked. I find it hard to believe that it is a lack of performance, since the apps weren't even showing particularly large or complicated datasets, and the Nexus 10 isn't exactly slow normally. It's like animation framerate was getting capped for power saving reasons perhaps?

Regardless, I have identified that I absolutely will need to limit animations on mobile devices, but not based on media query-able properties. The tablets I tested on have large, high res screens. Some animations, like a minimal fade-in/fade-out on smaller elements look somewhat better than animations that involve movement or larger elements, so they are the ones I might want to keep.