Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

Commit

Permalink
pref($animate): only trigger DOM callbacks if registered on the eleme…
Browse files Browse the repository at this point in the history
…nt 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.
  • Loading branch information
matsko authored and IgorMinar committed Feb 15, 2014
1 parent f288b8f commit cf5e463
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 14 deletions.
34 changes: 20 additions & 14 deletions src/ngAnimate/animate.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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
Expand Down
15 changes: 15 additions & 0 deletions test/ngAnimate/animateSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {

Expand Down

1 comment on commit cf5e463

@mgol
Copy link
Member

@mgol mgol commented on cf5e463 Feb 15, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

pref? Not perf?

Please sign in to comment.