fix(ngAnimate): cut down on extra $timeout calls

angular · Sep 4, 2013 · 4382df0 · 4382df0
1 parent d11a34a
commit 4382df0
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 169 deletions.
diff --git a/src/ng/animate.js b/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

diff --git a/src/ngAnimate/animate.js b/src/ngAnimate/animate.js
@@ -283,7 +283,7 @@ 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);
+            done && $timeout(done, 0, false);
           });
         },
 
@@ -353,7 +353,7 @@ 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);
+            done && $timeout(done, 0, false);
           });
         },
 
@@ -615,10 +615,11 @@ angular.module('ngAnimate', ['ng'])
             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');
+          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

diff --git a/test/ng/directive/ngClassSpec.js b/test/ng/directive/ngClassSpec.js
@@ -321,29 +321,27 @@ describe('ngClass animations', function() {
     expect($animate.queue.length).toBe(0);
 
     $rootScope.val = 'one';
+    $timeout.flush();
+
     $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);
-    $timeout.flush();
 
     $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');
-    $timeout.flush();
     expect($animate.queue.length).toBe(0);
   }));
 });