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.
This commit is contained in:
committed by
Igor Minar
parent
f288b8f010
commit
cf5e463abd
+20
-14
@@ -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
|
||||
|
||||
@@ -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) {
|
||||
|
||||
|
||||
Reference in New Issue
Block a user