diff --git a/src/ngAnimate/animate.js b/src/ngAnimate/animate.js index d8c65712ca79..cccb5d875ef8 100644 --- a/src/ngAnimate/animate.js +++ b/src/ngAnimate/animate.js @@ -411,34 +411,31 @@ angular.module('ngAnimate', ['ng']) $rootElement.data(NG_ANIMATE_STATE, rootAnimateState); - // disable animations during bootstrap, but once we bootstrapped, wait again - // for another digest until enabling animations. Enter, leave and move require - // a follow-up digest so having a watcher here is enough to let both digests pass. - // However, when any directive or view templates are downloaded then we need to - // handle postpone enabling animations until they are fully completed and then... - var watchFn = $rootScope.$watch( + // Wait until all directive and route-related templates are downloaded and + // compiled. The $templateRequest.totalPendingRequests variable keeps track of + // all of the remote templates being currently downloaded. If there are no + // templates currently downloading then the watcher will still fire anyway. + var deregisterWatch = $rootScope.$watch( function() { return $templateRequest.totalPendingRequests; }, function(val, oldVal) { - if (oldVal === 0) { - if (val === 0) { - $rootScope.$$postDigest(onApplicationReady); - } - } else if(val === 0) { - // ...when the template has been downloaded we digest twice again until the - // animations are set to enabled (since enter, leave and move require a - // follow-up). + if (val !== 0) return; + deregisterWatch(); + + // Now that all templates have been downloaded, $animate will wait until + // the post digest queue is empty before enabling animations. By having two + // calls to $postDigest calls we can ensure that the flag is enabled at the + // very end of the post digest queue. Since all of the animations in $animate + // use $postDigest, it's important that the code below executes at the end. + // This basically means that the page is fully downloaded and compiled before + // any animations are triggered. + $rootScope.$$postDigest(function() { $rootScope.$$postDigest(function() { - $rootScope.$$postDigest(onApplicationReady); + rootAnimateState.running = false; }); - } + }); } ); - function onApplicationReady() { - rootAnimateState.running = false; - watchFn(); - } - var globalAnimationCounter = 0; var classNameFilter = $animateProvider.classNameFilter(); var isAnimatableClassName = !classNameFilter diff --git a/test/ng/directive/ngClassSpec.js b/test/ng/directive/ngClassSpec.js index b2c2e70016f1..ab97afb5b42d 100644 --- a/test/ng/directive/ngClassSpec.js +++ b/test/ng/directive/ngClassSpec.js @@ -434,7 +434,10 @@ describe('ngClass animations', function() { }); inject(function($compile, $rootScope, $browser, $rootElement, $animate, $timeout, $document) { - // Animations are enabled right away since there are no remote HTTP template requests + // Animations need to digest twice in order to be enabled regardless if there are no template HTTP requests. + $rootScope.$digest(); + digestQueue.shift()(); + $rootScope.$digest(); digestQueue.shift()();