fix(core): handle cases where classes added have no animations (#63242)

thePunderWoman · thePunderWoman · commit f9d73cc6877d · 2025-08-20T08:59:03.000Z
In the case that someone wants to disable animations via selector specificity, for example by adding an `.animate-disabled` class to a parent node, we need to make sure the animate instructions don't misbehave. Now we detect if animations exist in the provided classes and react accordingly. fixes: #63161 PR Close #63242
diff --git a/packages/core/src/animation/longest_animation.ts b/packages/core/src/animation/longest_animation.ts
@@ -56,6 +56,20 @@ function getLongestComputedAnimation(computedStyle: CSSStyleDeclaration): Longes
   return longest;
 }
 
+function isShorterThanExistingAnimation(
+  existing: LongestAnimation | undefined,
+  longest: LongestAnimation,
+): boolean {
+  return existing !== undefined && existing.duration > longest.duration;
+}
+
+function longestExists(longest: LongestAnimation): boolean {
+  return (
+    (longest.animationName != undefined || longest.propertyName != undefined) &&
+    longest.duration > 0
+  );
+}
+
 /**
  * Determines the longest animation, but with `getComputedStyles` instead of `getAnimations`. This
  * is ultimately safer than getAnimations because it can be used when recalculations are in
@@ -72,10 +86,10 @@ function determineLongestAnimationFromComputedStyles(
 
   const longest =
     longestAnimation.duration > longestTransition.duration ? longestAnimation : longestTransition;
-  if (animationsMap.has(el) && animationsMap.get(el)!.duration > longest.duration) {
-    return;
+  if (isShorterThanExistingAnimation(animationsMap.get(el), longest)) return;
+  if (longestExists(longest)) {
+    animationsMap.set(el, longest);
   }
-  animationsMap.set(el, longest);
 }
 
 /**
@@ -86,12 +100,11 @@ function determineLongestAnimationFromComputedStyles(
  * that animation completes.
  */
 export function determineLongestAnimation(
-  event: AnimationEvent | TransitionEvent,
   el: HTMLElement,
   animationsMap: WeakMap<HTMLElement, LongestAnimation>,
   areAnimationSupported: boolean,
 ): void {
-  if (!areAnimationSupported || !(event.target instanceof Element) || event.target !== el) return;
+  if (!areAnimationSupported) return;
   const animations = el.getAnimations();
   return animations.length === 0
     ? // fallback to computed styles if getAnimations is empty. This would happen if styles are
@@ -105,7 +118,7 @@ function determineLongestAnimationFromElementAnimations(
   animationsMap: WeakMap<HTMLElement, LongestAnimation>,
   animations: Animation[],
 ): void {
-  let currentLongest: LongestAnimation = {
+  let longest: LongestAnimation = {
     animationName: undefined,
     propertyName: undefined,
     duration: 0,
@@ -126,12 +139,12 @@ function determineLongestAnimationFromElementAnimations(
       propertyName = (animation as CSSTransition).transitionProperty;
     }
 
-    if (duration >= currentLongest.duration) {
-      currentLongest = {animationName, propertyName, duration};
+    if (duration >= longest.duration) {
+      longest = {animationName, propertyName, duration};
     }
   }
-  if (animationsMap.has(el) && animationsMap.get(el)!.duration > currentLongest.duration) {
-    return;
+  if (isShorterThanExistingAnimation(animationsMap.get(el), longest)) return;
+  if (longestExists(longest)) {
+    animationsMap.set(el, longest);
   }
-  animationsMap.set(el, currentLongest);
 }
diff --git a/packages/core/src/render3/instructions/animation.ts b/packages/core/src/render3/instructions/animation.ts
@@ -141,7 +141,6 @@ export function ɵɵanimateEnter(value: string | Function): typeof ɵɵanimateEn
   // This also allows us to setup cancellation of animations in progress if the
   // gets removed early.
   const handleAnimationStart = (event: AnimationEvent | TransitionEvent) => {
-    determineLongestAnimation(event, nativeElement, longestAnimations, areAnimationSupported);
     setupAnimationCancel(event, renderer);
     const eventName = event instanceof AnimationEvent ? 'animationend' : 'transitionend';
     ngZone.runOutsideAngular(() => {
@@ -175,6 +174,20 @@ export function ɵɵanimateEnter(value: string | Function): typeof ɵɵanimateEn
     for (const klass of activeClasses) {
       renderer.addClass(nativeElement, klass);
     }
+    // In the case that the classes added have no animations, we need to remove
+    // the classes right away. This could happen because someone is intentionally
+    // preventing an animation via selector specificity.
+    ngZone.runOutsideAngular(() => {
+      requestAnimationFrame(() => {
+        determineLongestAnimation(nativeElement, longestAnimations, areAnimationSupported);
+        if (!longestAnimations.has(nativeElement)) {
+          for (const klass of activeClasses) {
+            renderer.removeClass(nativeElement, klass);
+          }
+          cleanupEnterClassData(nativeElement);
+        }
+      });
+    });
   }
 
   return ɵɵanimateEnter; // For chaining
@@ -504,14 +517,11 @@ function animateLeaveClassRunner(
   if (animationsDisabled) {
     longestAnimations.delete(el);
     finalRemoveFn();
+    return;
   }
 
   cancelAnimationsIfRunning(el, renderer);
 
-  const handleAnimationStart = (event: AnimationEvent | TransitionEvent) => {
-    determineLongestAnimation(event, el, longestAnimations, areAnimationSupported);
-  };
-
   const handleOutAnimationEnd = (event: AnimationEvent | TransitionEvent | CustomEvent) => {
     if (event instanceof CustomEvent || isLongestAnimation(event, el)) {
       // Now that we've found the longest animation, there's no need
@@ -525,16 +535,24 @@ function animateLeaveClassRunner(
     }
   };
 
-  if (!animationsDisabled) {
-    ngZone.runOutsideAngular(() => {
-      renderer.listen(el, 'animationstart', handleAnimationStart, {once: true});
-      renderer.listen(el, 'transitionstart', handleAnimationStart, {once: true});
-      renderer.listen(el, 'animationend', handleOutAnimationEnd);
-      renderer.listen(el, 'transitionend', handleOutAnimationEnd);
-    });
-    trackLeavingNodes(tNode, el);
-    for (const item of classList) {
-      renderer.addClass(el, item);
-    }
+  ngZone.runOutsideAngular(() => {
+    renderer.listen(el, 'animationend', handleOutAnimationEnd);
+    renderer.listen(el, 'transitionend', handleOutAnimationEnd);
+  });
+  trackLeavingNodes(tNode, el);
+  for (const item of classList) {
+    renderer.addClass(el, item);
   }
+  // In the case that the classes added have no animations, we need to remove
+  // the element right away. This could happen because someone is intentionally
+  // preventing an animation via selector specificity.
+  ngZone.runOutsideAngular(() => {
+    requestAnimationFrame(() => {
+      determineLongestAnimation(el, longestAnimations, areAnimationSupported);
+      if (!longestAnimations.has(el)) {
+        clearLeavingNodes(tNode);
+        finalRemoveFn();
+      }
+    });
+  });
 }
diff --git a/packages/core/test/acceptance/animation_spec.ts b/packages/core/test/acceptance/animation_spec.ts
