fix($animateCss): remove animation end event listeners on close

Previously the transition/animation end events were not removed when the
animation was closed. This normally didn't matter, because
the close function knows the animation are closed and won't do work
twice.
However, the listeners themselves do computation that could fail when
the event was missing some data, for example when the event was
triggered instead of natural.

Closes #10387

Author: Narretz

src/ngAnimate/animateCss.js

@@ -950,6 +950,7 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
             for (var i = 1; i < animationsData.length; i++) {
               animationsData[i]();
             }
+            removeEventListeners();
             element.removeData(ANIMATE_TIMER_KEY);
           }
         }
@@ -975,8 +976,13 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) {
             // the animation will automatically close itself since transitions cannot be paused.
             animationCompleted = true;
             close();
+            removeEventListeners();
           }
         }
+
+        function removeEventListeners() {
+          element.off(events.join(' '), onAnimationProgress);
+        }
       }
     };
   }];

test/ngAnimate/.jshintrc

@@ -8,6 +8,10 @@
     "applyAnimationStyles": false,
     "applyAnimationFromStyles": false,
     "applyAnimationToStyles": false,
-    "applyAnimationClassesFactory": false
+    "applyAnimationClassesFactory": false,
+    "TRANSITIONEND_EVENT": false,
+    "TRANSITION_PROP": false,
+    "ANIMATION_PROP": false,
+    "ANIMATIONEND_EVENT": false,
   }
 }

test/ngAnimate/animateCssSpec.js

@@ -12,6 +12,16 @@ describe("ngAnimate $animateCss", function() {
         : expect(className).not.toMatch(regex);
   }
 
+  function keyframeProgress(element, duration, delay) {
+    browserTrigger(element, 'animationend',
+      { timeStamp: Date.now() + ((delay || 1) * 1000), elapsedTime: duration });
+  }
+
+  function transitionProgress(element, duration, delay) {
+    browserTrigger(element, 'transitionend',
+      { timeStamp: Date.now() + ((delay || 1) * 1000), elapsedTime: duration });
+  }
+
   var fakeStyle = {
     color: 'blue'
   };
@@ -355,16 +365,6 @@ describe("ngAnimate $animateCss", function() {
           assert.toHaveClass('ng-enter-active');
         }
 
-        function keyframeProgress(element, duration, delay) {
-          browserTrigger(element, 'animationend',
-            { timeStamp: Date.now() + ((delay || 1) * 1000), elapsedTime: duration });
-        }
-
-        function transitionProgress(element, duration, delay) {
-          browserTrigger(element, 'transitionend',
-            { timeStamp: Date.now() + ((delay || 1) * 1000), elapsedTime: duration });
-        }
-
         beforeEach(inject(function($rootElement, $document) {
           element = jqLite('<div></div>');
           $rootElement.append(element);
@@ -463,6 +463,62 @@ describe("ngAnimate $animateCss", function() {
           });
         });
 
+        they("should remove the $prop event listener when the animation is closed",
+          [TRANSITIONEND_EVENT, ANIMATIONEND_EVENT], function(event) {
+
+          inject(function($animateCss, $rootScope) {
+
+            var callLog = {},
+              origOn = element.on,
+              origOff = element.off,
+              origListener,
+              progress;
+
+            callLog[event] = 0;
+
+            var proxyListener = function() {
+              callLog[event]++;
+              origListener.apply(this, arguments);
+            };
+
+            // Overwrite the .on function to log calls to the event listeners
+            element.on = function() {
+              origListener = arguments[1];
+              origOn.call(this, arguments[0], proxyListener);
+            };
+
+            // Make sure the .off function removes the proxyListener
+            element.off = function() {
+              origOff.call(this, arguments[0], proxyListener);
+            };
+
+            switch (event) {
+              case TRANSITIONEND_EVENT:
+                ss.addRule('.ng-enter', TRANSITION_PROP + '1s linear all;' +
+                                        TRANSITION_PROP + '-duration:10s;');
+
+                progress = bind(this, transitionProgress, element, 10);
+                break;
+              case ANIMATIONEND_EVENT:
+                ss.addRule('.ng-enter', ANIMATION_PROP + ':animation 10s;');
+                progress = bind(this, keyframeProgress, element, 10);
+                break;
+            }
+
+            var animator = $animateCss(element, options);
+            var runner = animator.start();
+            triggerAnimationStartFrame();
+
+            progress();
+            assertAnimationComplete(true);
+
+            // Trigger another end event
+            progress();
+
+            expect(callLog[event]).toBe(1);
+          });
+        });
+
         it("should use the highest transition duration value detected in the CSS class", inject(function($animateCss) {
           ss.addRule('.ng-enter', 'transition:1s linear all;' +
                                   'transition-duration:10s, 15s, 20s;');
@@ -1074,6 +1130,50 @@ describe("ngAnimate $animateCss", function() {
           expect(element).not.toHaveClass('ng-enter-active');
         }));
 
+        it("should remove the transitionend event listeners when the closing timeout closes the animation",
+          inject(function($animateCss, $document, $rootElement, $timeout) {
+
+            var element = jqLite('<div></div>'),
+              callLog = 0,
+              origOn = element.on,
+              origOff = element.off,
+              origListener,
+              progress;
+
+            var proxyListener = function() {
+              dump('proxyListener')
+              callLog++;
+              origListener.apply(this, arguments);
+            };
+
+            // Overwrite the .on function to log calls to the event listeners
+            element.on = function() {
+              origListener = arguments[1];
+              origOn.call(this, arguments[0], proxyListener);
+            };
+
+            // Make sure the .off function removes the proxyListener
+            element.off = function() {
+              origOff.call(this, arguments[0], proxyListener);
+            };
+
+            ss.addRule('.ng-enter', 'transition:10s linear all;');
+
+            $rootElement.append(element);
+            jqLite($document[0].body).append($rootElement);
+
+            var animator = $animateCss(element, { event: 'enter', structural: true });
+            animator.start();
+            triggerAnimationStartFrame();
+            $timeout.flush(15000);
+
+            // Force an transitionend event
+            transitionProgress(element, 10);
+
+            expect(callLog).toBe(0);
+
+        }));
+
         it("should close off the animation after 150% of the animation time has passed and consider the detected delay value",
           inject(function($animateCss, $document, $rootElement, $timeout) {