fix(core): Fixes animations in conjunction with content projection (angular#63776)

Content Projected nodes are not destroyed and recreated, like every other
situation. Enter and Leave animations were ephemeral and are
expected to run once, and then be cleared. This means that for content projection
cases, the animations would only ever work the first time they were shown / hid.

In order to resolve this, we move to an animation queue that re-runs the animation
functions stored in the LView. In most cases, this animation will run once on creation.
For content projection, the enter and leave animations will fire more than once. Animations
are stored on the LView, but indexed and scheduled by whichever RNode needs to be animated.
So we only run animations for an affected RNode, rather than potentially all in the LView.

This also moves the queue to afterRender, which is safer than right after template
execution in refreshView.

fixes: angular#63418
fixes: angular#64065
fixes: angular#63901

PR Close angular#63776

Author: thePunderWoman

packages/core/src/animation/interfaces.ts

@@ -18,6 +18,27 @@ export const ANIMATIONS_DISABLED = new InjectionToken<boolean>(
   },
 );
 
+export interface AnimationQueue {
+  queue: Set<Function>;
+  isScheduled: boolean;
+}
+
+/**
+ * A [DI token](api/core/InjectionToken) for the queue of all animations.
+ */
+export const ANIMATION_QUEUE = new InjectionToken<AnimationQueue>(
+  typeof ngDevMode !== 'undefined' && ngDevMode ? 'AnimationQueue' : '',
+  {
+    providedIn: 'root',
+    factory: () => {
+      return {
+        queue: new Set(),
+        isScheduled: false,
+      };
+    },
+  },
+);
+
 /**
  * The event type for when `animate.enter` and `animate.leave` are used with function
  * callbacks.
@@ -78,10 +99,10 @@ export interface LongestAnimation {
 
 export interface AnimationLViewData {
   // Enter animations that apply to nodes in this view
-  enter?: Function[];
+  enter?: Map<number, Function[]>;
 
   // Leave animations that apply to nodes in this view
-  leave?: (() => Promise<void>)[];
+  leave?: Map<number, Function[]>;
 
   // Leave animations that apply to nodes in this view
   // We chose to use unknown instead of PromiseSettledResult<void> to avoid requiring the type

packages/core/src/animation/utils.ts

@@ -162,17 +162,17 @@ export function trackLeavingNodes(tNode: TNode, el: HTMLElement): void {
 /**
  * Retrieves the list of specified enter animations from the lView
  */
-export function getLViewEnterAnimations(lView: LView): Function[] {
+export function getLViewEnterAnimations(lView: LView): Map<number, Function[]> {
   const animationData = (lView[ANIMATIONS] ??= {});
-  return (animationData.enter ??= []);
+  return (animationData.enter ??= new Map<number, Function[]>());
 }
 
 /**
  * Retrieves the list of specified leave animations from the lView
  */
-export function getLViewLeaveAnimations(lView: LView): Function[] {
+export function getLViewLeaveAnimations(lView: LView): Map<number, Function[]> {
   const animationData = (lView[ANIMATIONS] ??= {});
-  return (animationData.leave ??= []);
+  return (animationData.leave ??= new Map<number, Function[]>());
 }
 
 /**
@@ -244,8 +244,18 @@ export function isLongestAnimation(
 }
 
 /**
- * Determines if a given tNode is a content projection root node.
+ * Stores a given animation function in the LView's animation map for later execution
+ *
+ * @param animations Either the enter or leave animation map from the LView
+ * @param tNode The TNode the animation is associated with
+ * @param fn The animation function to be called later
  */
-export function isTNodeContentProjectionRoot(tNode: TNode): boolean {
-  return Array.isArray(tNode.projection);
+export function addAnimationToLView(
+  animations: Map<number, Function[]>,
+  tNode: TNode,
+  fn: Function,
+) {
+  const animationFns = animations.get(tNode.index) ?? [];
+  animationFns.push(fn);
+  animations.set(tNode.index, animationFns);
 }

packages/core/src/render3/instructions/animation.ts

@@ -7,21 +7,25 @@
  */
 
 import {
+  ANIMATION_QUEUE,
   AnimationCallbackEvent,
   AnimationFunction,
   MAX_ANIMATION_TIMEOUT,
 } from '../../animation/interfaces';
 import {getLView, getCurrentTNode} from '../state';
-import {RENDERER, INJECTOR, CONTEXT, LView} from '../interfaces/view';
+import {RENDERER, INJECTOR, CONTEXT, LView, ANIMATIONS} from '../interfaces/view';
 import {getNativeByTNode} from '../util/view_utils';
 import {performanceMarkFeature} from '../../util/performance';
 import {Renderer} from '../interfaces/renderer';
 import {NgZone} from '../../zone';
 import {determineLongestAnimation, allLeavingAnimations} from '../../animation/longest_animation';
 import {TNode} from '../interfaces/node';
 import {promiseWithResolvers} from '../../util/promise_with_resolvers';
+import {Injector} from '../../di';
+import {afterEveryRender} from '../after_render/hooks';
 
 import {
+  addAnimationToLView,
   areAnimationsDisabled,
   areAnimationSupported,
   assertAnimationTypes,
@@ -66,12 +70,16 @@ export function ɵɵanimateEnter(value: string | Function): typeof ɵɵanimateEn
 
   cancelLeavingNodes(tNode, lView);
 
-  getLViewEnterAnimations(lView).push(() => runEnterAnimation(lView, tNode, value));
+  addAnimationToLView(getLViewEnterAnimations(lView), tNode, () =>
+    runEnterAnimation(lView, tNode, value),
+  );
+
+  queueEnterAnimations(lView);
 
   return ɵɵanimateEnter; // For chaining
 }
 
-export function runEnterAnimation(lView: LView, tNode: TNode, value: string | Function): void {
+export function runEnterAnimation(lView: LView, tNode: TNode, value: string | Function) {
   const nativeElement = getNativeByTNode(tNode, lView) as HTMLElement;
 
   ngDevMode && assertElementNodes(nativeElement, 'animate.enter');
@@ -94,7 +102,7 @@ export function runEnterAnimation(lView: LView, tNode: TNode, value: string | Fu
 
     const eventName = event instanceof AnimationEvent ? 'animationend' : 'transitionend';
     ngZone.runOutsideAngular(() => {
-      cleanupFns.push(renderer.listen(nativeElement, eventName, handleEnterAnimationEnd));
+      renderer.listen(nativeElement, eventName, handleEnterAnimationEnd);
     });
   };
 
@@ -118,6 +126,7 @@ export function runEnterAnimation(lView: LView, tNode: TNode, value: string | Fu
     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.
@@ -182,15 +191,19 @@ export function ɵɵanimateEnterListener(value: AnimationFunction): typeof ɵɵa
 
   cancelLeavingNodes(tNode, lView);
 
-  getLViewEnterAnimations(lView).push(() => runEnterAnimationFunction(lView, tNode, value));
+  addAnimationToLView(getLViewEnterAnimations(lView), tNode, () =>
+    runEnterAnimationFunction(lView, tNode, value),
+  );
+
+  queueEnterAnimations(lView);
 
   return ɵɵanimateEnterListener;
 }
 
 /**
  * runs enter animations when a custom function is provided
  */
-function runEnterAnimationFunction(lView: LView, tNode: TNode, value: AnimationFunction) {
+function runEnterAnimationFunction(lView: LView, tNode: TNode, value: AnimationFunction): void {
   const nativeElement = getNativeByTNode(tNode, lView) as HTMLElement;
   ngDevMode && assertElementNodes(nativeElement, 'animate.enter');
 
@@ -224,19 +237,16 @@ export function ɵɵanimateLeave(value: string | Function): typeof ɵɵanimateLe
 
   const tNode = getCurrentTNode()!;
 
-  getLViewLeaveAnimations(lView).push(() =>
-    runLeaveAnimations(lView, tNode, value, animationsDisabled),
+  addAnimationToLView(getLViewLeaveAnimations(lView), tNode, () =>
+    runLeaveAnimations(lView, tNode, value),
   );
 
+  enableAnimationQueueScheduler(lView[INJECTOR]);
+
   return ɵɵanimateLeave; // For chaining
 }
 
-function runLeaveAnimations(
-  lView: LView,
-  tNode: TNode,
-  value: string | Function,
-  animationsDisabled: boolean,
-): Promise<void> {
+function runLeaveAnimations(lView: LView, tNode: TNode, value: string | Function): Promise<void> {
   const {promise, resolve} = promiseWithResolvers<void>();
   const nativeElement = getNativeByTNode(tNode, lView) as Element;
 
@@ -253,7 +263,6 @@ function runLeaveAnimations(
       tNode,
       activeClasses,
       renderer,
-      animationsDisabled,
       ngZone,
       resolve,
     );
@@ -273,17 +282,11 @@ function animateLeaveClassRunner(
   tNode: TNode,
   classList: string[],
   renderer: Renderer,
-  animationsDisabled: boolean,
   ngZone: NgZone,
   resolver: VoidFunction,
 ) {
-  if (animationsDisabled) {
-    longestAnimations.delete(el);
-    resolver();
-    return;
-  }
-
   cancelAnimationsIfRunning(el, renderer);
+  const cleanupFns: Function[] = [];
 
   const handleOutAnimationEnd = (event: AnimationEvent | TransitionEvent | CustomEvent) => {
     // this early exit case is to prevent issues with bubbling events that are from child element animations
@@ -307,11 +310,14 @@ function animateLeaveClassRunner(
       }
     }
     resolver();
+    for (const fn of cleanupFns) {
+      fn();
+    }
   };
 
   ngZone.runOutsideAngular(() => {
-    renderer.listen(el, 'animationend', handleOutAnimationEnd);
-    renderer.listen(el, 'transitionend', handleOutAnimationEnd);
+    cleanupFns.push(renderer.listen(el, 'animationend', handleOutAnimationEnd));
+    cleanupFns.push(renderer.listen(el, 'transitionend', handleOutAnimationEnd));
   });
   trackLeavingNodes(tNode, el);
   for (const item of classList) {
@@ -326,6 +332,9 @@ function animateLeaveClassRunner(
       if (!longestAnimations.has(el)) {
         clearLeavingNodes(tNode, el);
         resolver();
+        for (const fn of cleanupFns) {
+          fn();
+        }
       }
     });
   });
@@ -359,7 +368,11 @@ export function ɵɵanimateLeaveListener(value: AnimationFunction): typeof ɵɵa
   const tNode = getCurrentTNode()!;
   allLeavingAnimations.add(lView);
 
-  getLViewLeaveAnimations(lView).push(() => runLeaveAnimationFunction(lView, tNode, value));
+  addAnimationToLView(getLViewLeaveAnimations(lView), tNode, () =>
+    runLeaveAnimationFunction(lView, tNode, value),
+  );
+
+  enableAnimationQueueScheduler(lView[INJECTOR]);
 
   return ɵɵanimateLeaveListener; // For chaining
 }
@@ -416,3 +429,38 @@ function runLeaveAnimationFunction(
   // Ensure cleanup if the LView is destroyed before the animation runs.
   return promise;
 }
+
+function queueEnterAnimations(lView: LView) {
+  enableAnimationQueueScheduler(lView[INJECTOR]);
+  const enterAnimations = lView[ANIMATIONS]?.enter;
+  if (enterAnimations) {
+    const animationQueue = lView[INJECTOR].get(ANIMATION_QUEUE);
+    for (const [_, animateFns] of enterAnimations) {
+      for (const animateFn of animateFns) {
+        animationQueue.queue.add(animateFn);
+      }
+    }
+  }
+}
+
+function enableAnimationQueueScheduler(injector: Injector) {
+  const animationQueue = injector.get(ANIMATION_QUEUE);
+  // We only need to schedule the animation queue runner once per application.
+  if (!animationQueue.isScheduled) {
+    afterEveryRender(
+      () => {
+        runQueuedAnimations(injector);
+      },
+      {injector},
+    );
+    animationQueue.isScheduled = true;
+  }
+}
+
+function runQueuedAnimations(injector: Injector) {
+  const animationQueue = injector.get(ANIMATION_QUEUE);
+  for (let animateFn of animationQueue.queue) {
+    animateFn();
+  }
+  animationQueue.queue.clear();
+}

packages/core/src/render3/instructions/change_detection.ts

@@ -25,7 +25,6 @@ import {ComponentTemplate, HostBindingsFunction, RenderFlags} from '../interface
 import {
   CONTEXT,
   EFFECTS_TO_SCHEDULE,
-  ANIMATIONS,
   ENVIRONMENT,
   FLAGS,
   InitPhaseState,
@@ -232,7 +231,6 @@ export function refreshView<T>(
     if (templateFn !== null) {
       executeTemplate(tView, lView, templateFn, RenderFlags.Update, context);
     }
-    runEnterAnimations(lView);
 
     const hooksInitPhaseCompleted =
       (flags & LViewFlags.InitPhaseStateMask) === InitPhaseState.InitPhaseCompleted;
@@ -374,16 +372,6 @@ export function refreshView<T>(
   }
 }
 
-function runEnterAnimations(lView: LView) {
-  const animationData = lView[ANIMATIONS];
-  if (animationData?.enter) {
-    for (const animateFn of animationData.enter) {
-      animateFn();
-    }
-    animationData.enter = undefined;
-  }
-}
-
 /**
  * Goes over embedded views (ones created through ViewContainerRef APIs) and refreshes
  * them by executing an associated template function.