Fixes to animations

docs/components/angular-bootstrap/bootstrap-prettify.js

@@ -199,7 +199,6 @@ directive.ngEmbedApp = ['$templateCache', '$browser', '$rootScope', '$location',
           deregisterEmbedRootScope;
 
       modules.push(['$provide', function($provide) {
-        $provide.value('$animate', $animate);
         $provide.value('$templateCache', $templateCache);
         $provide.value('$anchorScroll', angular.noop);
         $provide.value('$browser', $browser);

src/ng/animate.js

@@ -98,7 +98,7 @@ var $AnimateProvider = ['$provide', function($provide) {
         forEach(element, function(node) {
           parentNode.insertBefore(node, afterNextSibling);
         });
-        $timeout(done || noop, 0, false);
+        done && $timeout(done, 0, false);
       },
 
       /**
@@ -115,7 +115,7 @@ var $AnimateProvider = ['$provide', function($provide) {
        */
       leave : function(element, done) {
         element.remove();
-        $timeout(done || noop, 0, false);
+        done && $timeout(done, 0, false);
       },
 
       /**
@@ -157,7 +157,7 @@ var $AnimateProvider = ['$provide', function($provide) {
                       className :
                       isArray(className) ? className.join(' ') : '';
         element.addClass(className);
-        $timeout(done || noop, 0, false);
+        done && $timeout(done, 0, false);
       },
 
       /**
@@ -178,7 +178,7 @@ var $AnimateProvider = ['$provide', function($provide) {
                       className :
                       isArray(className) ? className.join(' ') : '';
         element.removeClass(className);
-        $timeout(done || noop, 0, false);
+        done && $timeout(done, 0, false);
       },
 
       enabled : noop

src/ng/rootScope.js

@@ -119,6 +119,7 @@ function $RootScopeProvider(){
       this['this'] = this.$root =  this;
       this.$$destroyed = false;
       this.$$asyncQueue = [];
+      this.$$postDigestQueue = [];
       this.$$listeners = {};
       this.$$isolateBindings = {};
     }
@@ -133,6 +134,7 @@ function $RootScopeProvider(){
 
 
     Scope.prototype = {
+      constructor: Scope,
       /**
        * @ngdoc function
        * @name ng.$rootScope.Scope#$new
@@ -167,6 +169,7 @@ function $RootScopeProvider(){
           child.$root = this.$root;
           // ensure that there is just one async queue per $rootScope and it's children
           child.$$asyncQueue = this.$$asyncQueue;
+          child.$$postDigestQueue = this.$$postDigestQueue;
         } else {
           Child = function() {}; // should be anonymous; This is so that when the minifier munges
             // the name it does not become random set of chars. These will then show up as class
@@ -494,6 +497,7 @@ function $RootScopeProvider(){
         var watch, value, last,
             watchers,
             asyncQueue = this.$$asyncQueue,
+            postDigestQueue = this.$$postDigestQueue,
             length,
             dirty, ttl = TTL,
             next, current, target = this,
@@ -566,6 +570,14 @@ function $RootScopeProvider(){
         } while (dirty || asyncQueue.length);
 
         clearPhase();
+
+        while(postDigestQueue.length) {
+          try {
+            postDigestQueue.shift()();
+          } catch (e) {
+            $exceptionHandler(e);
+          }
+        }
       },
 
 
@@ -696,6 +708,10 @@ function $RootScopeProvider(){
         this.$$asyncQueue.push(expr);
       },
 
+      $$postDigest : function(expr) {
+        this.$$postDigestQueue.push(expr);
+      },
+
       /**
        * @ngdoc function
        * @name ng.$rootScope.Scope#$apply

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() {
-            $timeout(done || noop, 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() {
-            $timeout(done || noop, 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,15 +617,25 @@ 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';
           });
 
-          $timeout(function() {
-            element.addClass(activeClassName);
-            $timeout(done, duration * 1000, false);
-          },0,false);
+          //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);
 
           //this will automatically be called by $animate so
           //there is no need to attach this internally to the

src/ngRoute/directive/ngView.js

@@ -176,6 +176,7 @@ function ngViewFactory(   $route,   $anchorScroll,   $compile,   $controller,
   return {
     restrict: 'ECA',
     terminal: true,
+    priority: 1000,
     transclude: 'element',
     compile: function(element, attr, linker) {
       return function(scope, $element, attr) {

test/ng/directive/ngClassSpec.js

@@ -308,42 +308,107 @@ describe('ngClass', function() {
 describe('ngClass animations', function() {
   var body, element, $rootElement;
 
-  beforeEach(module('mock.animate'));
-
-  it("should avoid calling addClass accidentally when removeClass is going on",
+  it("should avoid calling addClass accidentally when removeClass is going on", function() {
+    module('mock.animate');
     inject(function($compile, $rootScope, $animate, $timeout) {
+      var element = angular.element('<div ng-class="val"></div>');
+      var body = jqLite(document.body);
+      body.append(element);
+      $compile(element)($rootScope);
 
-    var element = angular.element('<div ng-class="val"></div>');
-    var body = jqLite(document.body);
-    body.append(element);
-    $compile(element)($rootScope);
+      expect($animate.queue.length).toBe(0);
 
-    expect($animate.queue.length).toBe(0);
+      $rootScope.val = 'one';
+      $rootScope.$digest();
+      $animate.flushNext('addClass');
+      $animate.flushNext('addClass');
+      expect($animate.queue.length).toBe(0);
 
-    $rootScope.val = 'one';
-    $rootScope.$digest();
-    $animate.flushNext('addClass');
-    $animate.flushNext('addClass');
-    $timeout.flush();
-    expect($animate.queue.length).toBe(0);
+      $rootScope.val = '';
+      $rootScope.$digest();
+      $animate.flushNext('removeClass'); //only removeClass is called
+      expect($animate.queue.length).toBe(0);
 
-    $rootScope.val = '';
-    $rootScope.$digest();
-    $animate.flushNext('removeClass'); //only removeClass is called
-    expect($animate.queue.length).toBe(0);
-    $timeout.flush();
+      $rootScope.val = 'one';
+      $rootScope.$digest();
+      $animate.flushNext('addClass');
+      expect($animate.queue.length).toBe(0);
 
-    $rootScope.val = 'one';
-    $rootScope.$digest();
-    $animate.flushNext('addClass');
-    $timeout.flush();
-    expect($animate.queue.length).toBe(0);
+      $rootScope.val = 'two';
+      $rootScope.$digest();
+      $animate.flushNext('removeClass');
+      $animate.flushNext('addClass');
+      expect($animate.queue.length).toBe(0);
+    });
+  });
 
-    $rootScope.val = 'two';
-    $rootScope.$digest();
-    $animate.flushNext('removeClass');
-    $animate.flushNext('addClass');
-    $timeout.flush();
-    expect($animate.queue.length).toBe(0);
-  }));
+  it("should consider the ngClass expression evaluation before performing an animation", function() {
+
+    //mocks are not used since the enter delegation method is called before addClass and
+    //it makes it impossible to test to see that addClass is called first
+    module('ngAnimate');
+
+    var digestQueue = [];
+    module(function($animateProvider) {
+      $animateProvider.register('.crazy', function() {
+        return {
+          enter : function(element, done) {
+            element.data('state', 'crazy-enter');
+            done();
+          }
+        };
+      });
+
+      return function($rootScope) {
+        var before = $rootScope.$$postDigest;
+        $rootScope.$$postDigest = function() {
+          var args = arguments;
+          digestQueue.push(function() {
+            before.apply($rootScope, args);
+          });
+        };
+      };
+    });
+    inject(function($compile, $rootScope, $rootElement, $animate, $timeout, $document) {
+
+      //since we skip animations upon first digest, this needs to be set to true
+      $animate.enabled(true);
+
+      $rootScope.val = 'crazy';
+      var element = angular.element('<div ng-class="val"></div>');
+      jqLite($document[0].body).append($rootElement);
+
+      $compile(element)($rootScope);
+
+      var enterComplete = false;
+      $animate.enter(element, $rootElement, null, function() {
+        enterComplete = true;
+      });
+
+      //jquery doesn't compare both elements properly so let's use the nodes
+      expect(element.parent()[0]).toEqual($rootElement[0]);
+      expect(element.hasClass('crazy')).toBe(false);
+      expect(enterComplete).toBe(false);
+
+      expect(digestQueue.length).toBe(1);
+      $rootScope.$digest();
+
+      $timeout.flush();
+
+      expect(element.hasClass('crazy')).toBe(true);
+      expect(enterComplete).toBe(false);
+
+      digestQueue.shift()(); //enter
+      expect(digestQueue.length).toBe(0);
+
+      //we don't normally need this, but since the timing between digests
+      //is spaced-out then it is required so that the original digestion
+      //is kicked into gear
+      $rootScope.$digest();
+      $timeout.flush();
+
+      expect(element.data('state')).toBe('crazy-enter');
+      expect(enterComplete).toBe(true);
+    });
+  });
 });