fix($animateCss): 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.

Closes angular#13787

Author: Narretz

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);

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
   }
 }

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() {