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

This reverts commit 1cb16fd.

PR Close angular#64189

Author: kirjs

packages/core/src/animation/interfaces.ts

@@ -18,27 +18,6 @@ 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.
@@ -99,10 +78,10 @@ export interface LongestAnimation {
 
 export interface AnimationLViewData {
   // Enter animations that apply to nodes in this view
-  enter?: Map<number, Function[]>;
+  enter?: Function[];
 
   // Leave animations that apply to nodes in this view
-  leave?: Map<number, Function[]>;
+  leave?: (() => Promise<void>)[];
 
   // 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): Map<number, Function[]> {
+export function getLViewEnterAnimations(lView: LView): Function[] {
   const animationData = (lView[ANIMATIONS] ??= {});
-  return (animationData.enter ??= new Map<number, Function[]>());
+  return (animationData.enter ??= []);
 }
 
 /**
  * Retrieves the list of specified leave animations from the lView
  */
-export function getLViewLeaveAnimations(lView: LView): Map<number, Function[]> {
+export function getLViewLeaveAnimations(lView: LView): Function[] {
   const animationData = (lView[ANIMATIONS] ??= {});
-  return (animationData.leave ??= new Map<number, Function[]>());
+  return (animationData.leave ??= []);
 }
 
 /**
@@ -244,18 +244,8 @@ export function isLongestAnimation(
 }
 
 /**
- * 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
+ * Determines if a given tNode is a content projection root node.
  */
-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);
+export function isTNodeContentProjectionRoot(tNode: TNode): boolean {
+  return Array.isArray(tNode.projection);
 }

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

@@ -7,25 +7,21 @@
  */
 
 import {
-  ANIMATION_QUEUE,
   AnimationCallbackEvent,
   AnimationFunction,
   MAX_ANIMATION_TIMEOUT,
 } from '../../animation/interfaces';
 import {getLView, getCurrentTNode} from '../state';
-import {RENDERER, INJECTOR, CONTEXT, LView, ANIMATIONS} from '../interfaces/view';
+import {RENDERER, INJECTOR, CONTEXT, LView} 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,
@@ -70,16 +66,12 @@ export function ɵɵanimateEnter(value: string | Function): typeof ɵɵanimateEn
 
   cancelLeavingNodes(tNode, lView);
 
-  addAnimationToLView(getLViewEnterAnimations(lView), tNode, () =>
-    runEnterAnimation(lView, tNode, value),
-  );
-
-  queueEnterAnimations(lView);
+  getLViewEnterAnimations(lView).push(() => runEnterAnimation(lView, tNode, value));
 
   return ɵɵanimateEnter; // For chaining
 }
 
-export function runEnterAnimation(lView: LView, tNode: TNode, value: string | Function) {
+export function runEnterAnimation(lView: LView, tNode: TNode, value: string | Function): void {
   const nativeElement = getNativeByTNode(tNode, lView) as HTMLElement;
 
   ngDevMode && assertElementNodes(nativeElement, 'animate.enter');
@@ -102,7 +94,7 @@ export function runEnterAnimation(lView: LView, tNode: TNode, value: string | Fu
 
     const eventName = event instanceof AnimationEvent ? 'animationend' : 'transitionend';
     ngZone.runOutsideAngular(() => {
-      renderer.listen(nativeElement, eventName, handleEnterAnimationEnd);
+      cleanupFns.push(renderer.listen(nativeElement, eventName, handleEnterAnimationEnd));
     });
   };
 
@@ -126,7 +118,6 @@ 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.
@@ -191,19 +182,15 @@ export function ɵɵanimateEnterListener(value: AnimationFunction): typeof ɵɵa
 
   cancelLeavingNodes(tNode, lView);
 
-  addAnimationToLView(getLViewEnterAnimations(lView), tNode, () =>
-    runEnterAnimationFunction(lView, tNode, value),
-  );
-
-  queueEnterAnimations(lView);
+  getLViewEnterAnimations(lView).push(() => runEnterAnimationFunction(lView, tNode, value));
 
   return ɵɵanimateEnterListener;
 }
 
 /**
  * runs enter animations when a custom function is provided
  */
-function runEnterAnimationFunction(lView: LView, tNode: TNode, value: AnimationFunction): void {
+function runEnterAnimationFunction(lView: LView, tNode: TNode, value: AnimationFunction) {
   const nativeElement = getNativeByTNode(tNode, lView) as HTMLElement;
   ngDevMode && assertElementNodes(nativeElement, 'animate.enter');
 
@@ -237,16 +224,19 @@ export function ɵɵanimateLeave(value: string | Function): typeof ɵɵanimateLe
 
   const tNode = getCurrentTNode()!;
 
-  addAnimationToLView(getLViewLeaveAnimations(lView), tNode, () =>
-    runLeaveAnimations(lView, tNode, value),
+  getLViewLeaveAnimations(lView).push(() =>
+    runLeaveAnimations(lView, tNode, value, animationsDisabled),
   );
 
-  enableAnimationQueueScheduler(lView[INJECTOR]);
-
   return ɵɵanimateLeave; // For chaining
 }
 
-function runLeaveAnimations(lView: LView, tNode: TNode, value: string | Function): Promise<void> {
+function runLeaveAnimations(
+  lView: LView,
+  tNode: TNode,
+  value: string | Function,
+  animationsDisabled: boolean,
+): Promise<void> {
   const {promise, resolve} = promiseWithResolvers<void>();
   const nativeElement = getNativeByTNode(tNode, lView) as Element;
 
@@ -263,6 +253,7 @@ function runLeaveAnimations(lView: LView, tNode: TNode, value: string | Function
       tNode,
       activeClasses,
       renderer,
+      animationsDisabled,
       ngZone,
       resolve,
     );
@@ -282,11 +273,17 @@ 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
@@ -310,14 +307,11 @@ function animateLeaveClassRunner(
       }
     }
     resolver();
-    for (const fn of cleanupFns) {
-      fn();
-    }
   };
 
   ngZone.runOutsideAngular(() => {
-    cleanupFns.push(renderer.listen(el, 'animationend', handleOutAnimationEnd));
-    cleanupFns.push(renderer.listen(el, 'transitionend', handleOutAnimationEnd));
+    renderer.listen(el, 'animationend', handleOutAnimationEnd);
+    renderer.listen(el, 'transitionend', handleOutAnimationEnd);
   });
   trackLeavingNodes(tNode, el);
   for (const item of classList) {
@@ -332,9 +326,6 @@ function animateLeaveClassRunner(
       if (!longestAnimations.has(el)) {
         clearLeavingNodes(tNode, el);
         resolver();
-        for (const fn of cleanupFns) {
-          fn();
-        }
       }
     });
   });
@@ -368,11 +359,7 @@ export function ɵɵanimateLeaveListener(value: AnimationFunction): typeof ɵɵa
   const tNode = getCurrentTNode()!;
   allLeavingAnimations.add(lView);
 
-  addAnimationToLView(getLViewLeaveAnimations(lView), tNode, () =>
-    runLeaveAnimationFunction(lView, tNode, value),
-  );
-
-  enableAnimationQueueScheduler(lView[INJECTOR]);
+  getLViewLeaveAnimations(lView).push(() => runLeaveAnimationFunction(lView, tNode, value));
 
   return ɵɵanimateLeaveListener; // For chaining
 }
@@ -429,38 +416,3 @@ 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,6 +25,7 @@ import {ComponentTemplate, HostBindingsFunction, RenderFlags} from '../interface
 import {
   CONTEXT,
   EFFECTS_TO_SCHEDULE,
+  ANIMATIONS,
   ENVIRONMENT,
   FLAGS,
   InitPhaseState,
@@ -231,6 +232,7 @@ export function refreshView<T>(
     if (templateFn !== null) {
       executeTemplate(tView, lView, templateFn, RenderFlags.Update, context);
     }
+    runEnterAnimations(lView);
 
     const hooksInitPhaseCompleted =
       (flags & LViewFlags.InitPhaseStateMask) === InitPhaseState.InitPhaseCompleted;
@@ -372,6 +374,16 @@ 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.