From cf5e463abd2c23f62e9c2e6361e6c53048c8910e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matias=20Niemel=C3=A4?= <matias@yearofmoo.com>
Date: Fri, 14 Feb 2014 00:53:49 -0500
Subject: [PATCH] pref($animate): only trigger DOM callbacks if registered on
 the element being animated

BREAKING CHANGE: Both the `$animate:before` and `$animate:after` DOM events must be now
registered prior to the $animate operation taking place. The `$animate:close` event
can be registered anytime afterwards.

DOM callbacks used to fired for each and every animation operation that occurs within the
$animate service provided in the ngAnimate module. This may end up slowing down an
application if 100s of elements are being inserted into the page. Therefore after this
change callbacks are only fired if registered on the element being animated.
---
 src/ngAnimate/animate.js      | 34 ++++++++++++++++++++--------------
 test/ngAnimate/animateSpec.js | 15 +++++++++++++++
 2 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/src/ngAnimate/animate.js b/src/ngAnimate/animate.js
index 99b42f387fde..dba8d3fa3cd1 100644
--- a/src/ngAnimate/animate.js
+++ b/src/ngAnimate/animate.js
@@ -627,6 +627,9 @@ angular.module('ngAnimate', ['ng'])
           return;
         }
 
+        var elementEvents = angular.element._data(node);
+        elementEvents = elementEvents && elementEvents.events;
+
         var animationLookup = (' ' + classes).replace(/\s+/g,'.');
         if (!parentElement) {
           parentElement = afterElement ? afterElement.parent() : element.parent();
@@ -822,29 +825,32 @@ angular.module('ngAnimate', ['ng'])
         }
 
         function fireDOMCallback(animationPhase) {
-          element.triggerHandler('$animate:' + animationPhase, {
-            event : animationEvent,
-            className : className
-          });
+          var eventName = '$animate:' + animationPhase;
+          if(elementEvents && elementEvents[eventName] && elementEvents[eventName].length > 0) {
+            $$asyncQueueBuffer(function() {
+              element.triggerHandler(eventName, {
+                event : animationEvent,
+                className : className
+              });
+            });
+          }
         }
 
         function fireBeforeCallbackAsync() {
-          $$asyncQueueBuffer(function() {
-            fireDOMCallback('before');
-          });
+          fireDOMCallback('before');
         }
 
         function fireAfterCallbackAsync() {
-          $$asyncQueueBuffer(function() {
-            fireDOMCallback('after');
-          });
+          fireDOMCallback('after');
         }
 
         function fireDoneCallbackAsync() {
-          $$asyncQueueBuffer(function() {
-            fireDOMCallback('close');
-            doneCallback && doneCallback();
-          });
+          fireDOMCallback('close');
+          if(doneCallback) {
+            $$asyncQueueBuffer(function() {
+              doneCallback();
+            });
+          }
         }
 
         //it is less complicated to use a flag than managing and cancelling
diff --git a/test/ngAnimate/animateSpec.js b/test/ngAnimate/animateSpec.js
index 41115e42b792..8da3d1cbfbce 100644
--- a/test/ngAnimate/animateSpec.js
+++ b/test/ngAnimate/animateSpec.js
@@ -1573,6 +1573,21 @@ describe("ngAnimate", function() {
           expect(steps.shift()).toEqual(['after',  'ng-enter', 'enter']);
         })); 
 
+        it('should not fire DOM callbacks on the element being animated unless registered',
+          inject(function($animate, $rootScope, $compile, $sniffer, $rootElement, $timeout) {
+
+          $animate.enabled(true);
+
+          var element = jqLite('<div></div>');
+          $rootElement.append(element);
+          body.append($rootElement);
+
+          $animate.addClass(element, 'class');
+          $rootScope.$digest();
+
+          $timeout.verifyNoPendingTasks();
+        }));
+
         it("should fire a done callback when provided with no animation",
           inject(function($animate, $rootScope, $compile, $sniffer, $rootElement, $timeout) {