From 9a395688fed7c55abaa9513f1ebd3967242c68d3 Mon Sep 17 00:00:00 2001
From: Martin Staffa <mjstaffa@googlemail.com>
Date: Mon, 18 Jan 2016 12:54:37 +0100
Subject: [PATCH] fix($animate): cancel fallback timeout when animation ends
 normally

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.
---
 src/ngAnimate/animateCss.js      |  7 +++++++
 test/ngAnimate/.jshintrc         |  3 ++-
 test/ngAnimate/animateCssSpec.js | 23 +++++++++++++++++++++++
 3 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/ngAnimate/animateCss.js b/src/ngAnimate/animateCss.js
index b9757f27777c..54bc23c97922 100644
--- 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
index fcaf04058079..d182bdf2d2d4 100644
--- 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
index 7de34ee58615..6e0b66073e76 100644
--- 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() {