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

Animate optimizations #13879

Closed
wants to merge 3 commits into from
Closed

Animate optimizations #13879

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bb366d1
perf(ngRepeat): avoid duplicate jqLite wrappers
dcherman Jan 28, 2016
81ae59b
perf(ngAnimate): avoid $.fn.data overhead with jQuery
dcherman Jan 28, 2016
29f1eac
perf(ngAnimate): avoid jqLite/jQuery for upward DOM traversal
dcherman Feb 9, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions src/ng/directive/ngRepeat.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -515,7 +515,7 @@ var ngRepeatDirective = ['$parse', '$animate', function($parse, $animate) {

if (getBlockStart(block) != nextNode) {
// existing item which got moved
$animate.move(getBlockNodes(block.clone), null, jqLite(previousNode));
$animate.move(getBlockNodes(block.clone), null, previousNode);
}
previousNode = getBlockEnd(block);
updateScope(block.scope, index, valueIdentifier, value, keyIdentifier, key, collectionLength);
Expand All @@ -527,8 +527,7 @@ var ngRepeatDirective = ['$parse', '$animate', function($parse, $animate) {
var endNode = ngRepeatEndComment.cloneNode(false);
clone[clone.length++] = endNode;

// TODO(perf): support naked previousNode in `enter` to avoid creation of jqLite wrapper?
$animate.enter(clone, null, jqLite(previousNode));
$animate.enter(clone, null, previousNode);
previousNode = endNode;
// Note: We only need the first/last node of the cloned nodes.
// However, we need to keep the reference to the jqlite wrapper as it might be changed later
Expand Down
21 changes: 11 additions & 10 deletions src/ngAnimate/animateQueue.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -585,30 +585,31 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
var animateChildren;
var elementDisabled = disabledElementsLookup.get(getDomNode(element));

var parentHost = element.data(NG_ANIMATE_PIN_DATA);
var parentHost = jqLite.data(element[0], NG_ANIMATE_PIN_DATA);
if (parentHost) {
parentElement = parentHost;
}

while (parentElement && parentElement.length) {
parentElement = getDomNode(parentElement);

while (parentElement) {
if (!rootElementDetected) {
// angular doesn't want to attempt to animate elements outside of the application
// therefore we need to ensure that the rootElement is an ancestor of the current element
rootElementDetected = isMatchingElement(parentElement, $rootElement);
}

var parentNode = parentElement[0];
if (parentNode.nodeType !== ELEMENT_NODE) {
if (parentElement.nodeType !== ELEMENT_NODE) {
// no point in inspecting the #document element
break;
}

var details = activeAnimationsLookup.get(parentNode) || {};
var details = activeAnimationsLookup.get(parentElement) || {};
// either an enter, leave or move animation will commence
// therefore we can't allow any animations to take place
// but if a parent animation is class-based then that's ok
if (!parentAnimationDetected) {
var parentElementDisabled = disabledElementsLookup.get(parentNode);
var parentElementDisabled = disabledElementsLookup.get(parentElement);

if (parentElementDisabled === true && elementDisabled !== false) {
// disable animations if the user hasn't explicitly enabled animations on the
Expand All @@ -623,7 +624,7 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
}

if (isUndefined(animateChildren) || animateChildren === true) {
var value = parentElement.data(NG_ANIMATE_CHILDREN_DATA);
var value = jqLite.data(parentElement, NG_ANIMATE_CHILDREN_DATA);
if (isDefined(value)) {
animateChildren = value;
}
Expand All @@ -646,15 +647,15 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {

if (!rootElementDetected) {
// If no rootElement is detected, check if the parentElement is pinned to another element
parentHost = parentElement.data(NG_ANIMATE_PIN_DATA);
parentHost = jqLite.data(parentElement, NG_ANIMATE_PIN_DATA);
if (parentHost) {
// The pin target element becomes the next parent element
parentElement = parentHost;
parentElement = getDomNode(parentHost);
continue;
}
}

parentElement = parentElement.parent();
parentElement = parentElement.parentNode;
}

var allowAnimation = (!parentAnimationDetected || animateChildren) && elementDisabled !== true;
Expand Down