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

Commit 47222c9

Browse files
committed
perf(ngAnimate): improve areAnimationsAllowed check
This commit speeds up the code that checks if an element can be animated for a few cases. The checks will be sped up greatly in cases where the animation is disabled via $animate.enabled(element, false) on either the element itself or a parent element. The commit also simplifies the code that checks if an element has been added to the $rootElement via $animate.pin(). A minor speed-up is also included for cases where the $rootElement of the app (the bootstrap element) is on the body or lower in the DOM tree.
1 parent 4b6b538 commit 47222c9

File tree

1 file changed

+31
-14
lines changed

1 file changed

+31
-14
lines changed

src/ngAnimate/animateQueue.js

+31-14
Original file line numberDiff line numberDiff line change
@@ -571,6 +571,13 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
571571
return getDomNode(nodeOrElmA) === getDomNode(nodeOrElmB);
572572
}
573573

574+
/**
575+
* This fn returns false if any of the following is true:
576+
* a) animations on the element or any parent are disabled
577+
* b) a parent element has an ongoing structural animation, and animateChildren is false
578+
* c) the element is not a child of the body
579+
* d) the element is not a child of the $rootElement
580+
*/
574581
function areAnimationsAllowed(element, parentElement, event) {
575582
var bodyElement = jqLite($document[0].body);
576583
var bodyElementDetected = isMatchingElement(element, bodyElement) || element[0].nodeName === 'HTML';
@@ -579,6 +586,11 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
579586
var animateChildren;
580587
var elementDisabled = disabledElementsLookup.get(getDomNode(element));
581588

589+
if (elementDisabled === true) {
590+
// If animations on the element have been disabled explicitly, no need to traverse the parents
591+
return false;
592+
}
593+
582594
var parentHost = element.data(NG_ANIMATE_PIN_DATA);
583595
if (parentHost) {
584596
parentElement = parentHost;
@@ -604,10 +616,12 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
604616
if (!parentAnimationDetected) {
605617
var parentElementDisabled = disabledElementsLookup.get(parentNode);
606618

607-
// disable animations if the user hasn't explicitly enabled animations on the
608-
// current element
609619
if (parentElementDisabled === true && elementDisabled !== false) {
620+
// disable animations if the user hasn't explicitly enabled animations on the
621+
// current element
610622
elementDisabled = true;
623+
// element is disabled via parent element, no need to check anything else
624+
break;
611625
} else if (parentElementDisabled === false) {
612626
elementDisabled = false;
613627
}
@@ -624,26 +638,29 @@ var $$AnimateQueueProvider = ['$animateProvider', function($animateProvider) {
624638
// there is no need to continue traversing at this point
625639
if (parentAnimationDetected && animateChildren === false) break;
626640

627-
if (!rootElementDetected) {
628-
// angular doesn't want to attempt to animate elements outside of the application
629-
// therefore we need to ensure that the rootElement is an ancestor of the current element
630-
rootElementDetected = isMatchingElement(parentElement, $rootElement);
631-
if (!rootElementDetected) {
632-
parentHost = parentElement.data(NG_ANIMATE_PIN_DATA);
633-
if (parentHost) {
634-
// The pin target element becomes the parent element
635-
parentElement = parentHost;
636-
rootElementDetected = isMatchingElement(parentElement, $rootElement);
637-
}
641+
if (!rootElementDetected && !parentHost) {
642+
// If no rootElement is detected, and no parentHost has been found already,
643+
// check if the parentElement is pinned to another element
644+
parentHost = parentElement.data(NG_ANIMATE_PIN_DATA);
645+
if (parentHost) {
646+
// The pin target element becomes the parent element
647+
parentElement = parentHost;
648+
rootElementDetected = isMatchingElement(parentElement, $rootElement);
638649
}
639650
}
640651

641652
if (!bodyElementDetected) {
642-
// we also need to ensure that the element is or will be apart of the body element
653+
// we also need to ensure that the element is or will be a part of the body element
643654
// otherwise it is pointless to even issue an animation to be rendered
644655
bodyElementDetected = isMatchingElement(parentElement, bodyElement);
645656
}
646657

658+
if (bodyElementDetected && rootElementDetected) {
659+
// If both body and root have been found, any other checks are pointless,
660+
// as not animation data should live outside the application
661+
break;
662+
}
663+
647664
parentElement = parentElement.parent();
648665
}
649666

0 commit comments

Comments
 (0)