CSS animations trigger on initial render due to more digest cycles

[mathiasrando]

Angular waits two digest cycles before enabling the animations and that's great, but it results in unwanted behaviour if you have more than two cycles before first render(e.g. due to using templateUrl, routing etc).

What is the best practice to avoid the animations on initial render? Having everything animate in on first render becomes pretty tiresome.

[matsko]

Before waiting for two digests, Angular waits until all remote templates (views & directives) have been fully downloaded. So it should never result in this happening.

Do you have an example of this in action?

[mathiasrando]

I've made a plnkr showing the issue. The view slides in on load.
http://plnkr.co/edit/f4kfHqHSfJKjlWvY2Ghf?p=preview

Fullscreen: http://run.plnkr.co/E5q2mUlCWknaSMJM/#/

[booleanbetrayal]

I'm seeing similar issues since updating to c8700f0 on ng-hide elements that are nested within an ng-repeat which in turn is nested within an ng-if. I'm working around the issue by whitelisting via $animateProvider.classNameFilter('animated') and deferring the addition of the animated whitelisted class until after I know that initial render has completed.

[matsko]

@booleanbetrayal can you please provide an plnkr example? This may be a new issue entirely.

[mathiasrando]

By the way, I'm currently dealing with my issue like so:
ng-click="animations.enableAnimations()" class="{{::animationStatus}}" on the body-tag.

Combined with a simple service with if($rootScope.animationStatus !=='animations') set animationStatus to 'animations'(which triggers my styling and enables the animations). It seems rather hacky and slobbish, but at least it works for now.

[booleanbetrayal]

@matsko - Here's a plnkr of the isolated issue. It looks to be related to an asynchronous route resolver. The expected behavior is that any element with a ng-hide="false" should never be rendered visible. Let me know if I should create a new issue.

http://plnkr.co/edit/uk2Y0u?p=preview

[booleanbetrayal]

Wondering if you saw this, and if it's still relevant @matsko. ^

[Narretz]

This is expected - ngAnimate must decide to run animations at some point, and the current way of waiting for 2 digests works fine for most applications. You should use one of the ways described in the guide to disable animations until you need them, or where you don't need them: https://code.angularjs.org/snapshot/docs/guide/animations#how-to-selectively-enable-disable-and-skip-animations.

For example, in your applications .run block, you could call $animate.enabled(false), and only after your application has finished all initial async functions, call $animate.enabled(true) (wrapped in a timeout for good measure). Quick and dirty example: http://plnkr.co/edit/ds3fxW?p=preview