fix(ngAnimate): ensure that cancelled class-based animations are properly cleaned up

matsko · matsko · commit 718ff8440555 · 2015-05-19T20:54:10.000-07:00
Prior to this fix if the same CSS class was added and removed quickly then the element being animated would be left with a stale cache of the cancelled out animation. This would then result in follow-up animations being added to the previous animation which would then never run. A stale cache was to blame for that. This patch takes care of this issue. Closes angular#11652
diff --git a/src/ngAnimate/animateQueue.js b/src/ngAnimate/animateQueue.js
@@ -394,6 +394,13 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
             runner.end();
           }
 
+          // in the event that the element animation was not cancelled or a follow-up animation
+          // isn't allowed to animate from here then we need to clear the state of the element
+          // so that any future animations won't read the expired animation data.
+          if (!isValidAnimation) {
+            clearElementAnimationState(element);
+          }
+
           return;
         }
 
diff --git a/test/ngAnimate/animateSpec.js b/test/ngAnimate/animateSpec.js
@@ -1029,6 +1029,22 @@ describe("animations", function() {
 
         expect(runner1).not.toBe(runner2);
       }));
+
+      it('should properly cancel out animations when the same class is added/removed within the same digest',
+        inject(function($animate, $rootScope) {
+
+        parent.append(element);
+        $animate.addClass(element, 'red');
+        $animate.removeClass(element, 'red');
+        $rootScope.$digest();
+
+        expect(capturedAnimation).toBeFalsy();
+
+        $animate.addClass(element, 'blue');
+        $rootScope.$digest();
+
+        expect(capturedAnimation[2].addClass).toBe('blue');
+      }));
     });
 
     describe('should merge', function() {

Original file line number	Diff line number	Diff line change
`@@ -394,6 +394,13 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {`
`394`	`394`	`runner.end();`
`395`	`395`	`}`
`396`	`396`
	`397`	`+ // in the event that the element animation was not cancelled or a follow-up animation`
	`398`	`+ // isn't allowed to animate from here then we need to clear the state of the element`
	`399`	`+ // so that any future animations won't read the expired animation data.`
	`400`	`+ if (!isValidAnimation) {`
	`401`	`+ clearElementAnimationState(element);`
	`402`	`+ }`
	`403`	`+`
`397`	`404`	`return;`
`398`	`405`	`}`
`399`	`406`