fix(ngAnimate): ensure that ngClass is always compiled before enter, leave and move animations

Closes #3727
Closes #3603

1 files changed, 25 insertions, 9 deletions

diff --git a/src/ngAnimate/animate.js b/src/ngAnimate/animate.js
index 696e80b1..ca136a50 100644
--- a/src/ngAnimate/animate.js
+++ b/src/ngAnimate/animate.js
@@ -201,9 +201,9 @@ angular.module('ngAnimate', ['ng'])
 
     var NG_ANIMATE_STATE = '$$ngAnimateState';
     var rootAnimateState = {running:true};
-    $provide.decorator('$animate', ['$delegate', '$injector', '$sniffer', '$rootElement', '$timeout',
-                            function($delegate,   $injector,   $sniffer,   $rootElement,   $timeout) {
-
+    $provide.decorator('$animate', ['$delegate', '$injector', '$sniffer', '$rootElement', '$timeout', '$rootScope',
+                            function($delegate,   $injector,   $sniffer,   $rootElement,   $timeout,   $rootScope) {
+        
       $rootElement.data(NG_ANIMATE_STATE, rootAnimateState);
 
       function lookup(name) {
@@ -282,8 +282,10 @@ angular.module('ngAnimate', ['ng'])
         */
         enter : function(element, parent, after, done) {
           $delegate.enter(element, parent, after);
-          performAnimation('enter', 'ng-enter', element, parent, after, function() {
-            done && $timeout(done, 0, false);
+          $rootScope.$$postDigest(function() {
+            performAnimation('enter', 'ng-enter', element, parent, after, function() {
+              done && $timeout(done, 0, false);
+            });
           });
         },
 
@@ -315,8 +317,10 @@ angular.module('ngAnimate', ['ng'])
          * @param {function()=} done callback function that will be called once the animation is complete
         */
         leave : function(element, done) {
-          performAnimation('leave', 'ng-leave', element, null, null, function() {
-            $delegate.leave(element, done);
+          $rootScope.$$postDigest(function() {
+            performAnimation('leave', 'ng-leave', element, null, null, function() {
+              $delegate.leave(element, done);
+            });
           });
         },
 
@@ -352,8 +356,10 @@ angular.module('ngAnimate', ['ng'])
         */
         move : function(element, parent, after, done) {
           $delegate.move(element, parent, after);
-          performAnimation('move', 'ng-move', element, null, null, function() {
-            done && $timeout(done, 0, false);
+          $rootScope.$$postDigest(function() {
+            performAnimation('move', 'ng-move', element, null, null, function() {
+              done && $timeout(done, 0, false);
+            });
           });
         },
 
@@ -550,6 +556,7 @@ angular.module('ngAnimate', ['ng'])
 
       var durationKey = 'Duration',
           delayKey = 'Delay',
+          propertyKey = 'Property',
           animationIterationCountKey = 'IterationCount',
           ELEMENT_NODE = 1;
 
@@ -610,6 +617,13 @@ angular.module('ngAnimate', ['ng'])
            timeout is empty (this would cause a flicker bug normally
            in the page */
         if(duration > 0) {
+          var node = element[0];
+
+          //temporarily disable the transition so that the enter styles
+          //don't animate twice (this is here to avoid a bug in Chrome/FF).
+          node.style[w3cTransitionProp + propertyKey] = 'none';
+          node.style[vendorTransitionProp + propertyKey] = 'none';
+
           var activeClassName = '';
           forEach(className.split(' '), function(klass, i) {
             activeClassName += (i > 0 ? ' ' : '') + klass + '-active';
@@ -617,6 +631,8 @@ angular.module('ngAnimate', ['ng'])
 
           //this triggers a reflow which allows for the transition animation to kick in
           element.prop('clientWidth');
+          node.style[w3cTransitionProp + propertyKey] = '';
+          node.style[vendorTransitionProp + propertyKey] = '';
           element.addClass(activeClassName);
 
           $timeout(done, duration * 1000, false);