fix($animateCss): cancel fallback timeout when animation ends normally

Narretz · Narretz · commit a60bbc12e8c5 · 2016-01-27T19:28:36.000+01:00
Previously, css animations would not cancel the timeout when the animation ends normally (calling end explicitly / transitionEnd event). This meant that the timeout callback fn was always called after 150% of the animation time was over. Since the animation was already closed at this point, it would not do any work twice, but simply remove the timer data from the element. This commit changes the behavior to cancel the timeout and remove the data when it is found during animation closing. Closes angular#13787
diff --git a/src/ngAnimate/animateCss.js b/src/ngAnimate/animateCss.js
@@ -756,6 +756,13 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
           element.off(events.join(' '), onAnimationProgress);
         }
 
+        //Cancel the fallback closing timeout and remove the timer data
+        var animationTimerData = element.data(ANIMATE_TIMER_KEY);
+        if (animationTimerData) {
+          $timeout.cancel(animationTimerData[0].timer);
+          element.removeData(ANIMATE_TIMER_KEY);
+        }
+
         // if the preparation function fails then the promise is not setup
         if (runner) {
           runner.complete(!rejected);
diff --git a/test/ngAnimate/.jshintrc b/test/ngAnimate/.jshintrc
@@ -12,6 +12,7 @@
     "TRANSITIONEND_EVENT": false,
     "TRANSITION_PROP": false,
     "ANIMATION_PROP": false,
-    "ANIMATIONEND_EVENT": false
+    "ANIMATIONEND_EVENT": false,
+    "ANIMATE_TIMER_KEY": false
   }
 }
diff --git a/test/ngAnimate/animateCssSpec.js b/test/ngAnimate/animateCssSpec.js
@@ -1309,6 +1309,29 @@ describe("ngAnimate $animateCss", function() {
           expect(getPossiblyPrefixedStyleValue(element, 'transition-delay')).toBeOneOf('', '0s');
         }));
 
+
+        it("should cancel the timeout when the animation is ended normally",
+          inject(function($animateCss, $document, $rootElement, $timeout) {
+
+          ss.addRule('.ng-enter', 'transition:10s linear all;');
+
+          var element = jqLite('<div></div>');
+          $rootElement.append(element);
+          jqLite($document[0].body).append($rootElement);
+
+          var animator = $animateCss(element, { event: 'enter', structural: true });
+          animator.start();
+          triggerAnimationStartFrame();
+
+          expect(element).toHaveClass('ng-enter');
+          expect(element).toHaveClass('ng-enter-active');
+
+          animator.end();
+
+          expect(element.data(ANIMATE_TIMER_KEY)).toBeUndefined();
+          expect(function() {$timeout.verifyNoPendingTasks();}).not.toThrow();
+        }));
+
       });
 
       describe("getComputedStyle", function() {

Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,7 @@`
`12`	`12`	`"TRANSITIONEND_EVENT": false,`
`13`	`13`	`"TRANSITION_PROP": false,`
`14`	`14`	`"ANIMATION_PROP": false,`
`15`		`- "ANIMATIONEND_EVENT": false`
	`15`	`+ "ANIMATIONEND_EVENT": false,`
	`16`	`+ "ANIMATE_TIMER_KEY": false`
`16`	`17`	`}`
`17`	`18`	`}`