Function runEnterAnimation

packages/core/src/render3/instructions/animation.ts:94–166

(
  lView: LView,
  tNode: TNode,
  value: string | AnimationClassBindingFn,
  ngZone: NgZone,
)

}

export function runEnterAnimation(
  lView: LView,
  tNode: TNode,
  value: string | AnimationClassBindingFn,
  ngZone: NgZone,
): void {
  const nativeElement = getNativeByTNode(tNode, lView) as HTMLElement;

  ngDevMode && assertElementNodes(nativeElement, 'animate.enter');

  const renderer = lView[RENDERER];

  // Retrieve the actual class list from the value. This will resolve any resolver functions from
  // bindings.
  const activeClasses = getClassListFromValue(value);
  const cleanupFns: VoidFunction[] = [];
  let hasCompleted = false;

  // In the case where multiple animations are happening on the element, we need
  // to get the longest animation to ensure we don't complete animations early.
  // This also allows us to setup cancellation of animations in progress if the
  // gets removed early.
  const handleEnterAnimationStart = (event: AnimationEvent | TransitionEvent) => {
    // this early exit case is to prevent issues with bubbling events that are from child element animations
    if (getEventTarget(event) !== nativeElement) return;

    const eventName = event instanceof AnimationEvent ? 'animationend' : 'transitionend';
    ngZone.runOutsideAngular(() => {
      renderer.listen(nativeElement, eventName, handleEnterAnimationEnd);
    });
  };

  // When the longest animation ends, we can remove all the classes
  const handleEnterAnimationEnd = (event: AnimationEvent | TransitionEvent) => {
    // this early exit case is to prevent issues with bubbling events that are from child element animations
    if (getEventTarget(event) !== nativeElement) return;

    if (isLongestAnimation(event, nativeElement)) {
      hasCompleted = true;
    }
    enterAnimationEnd(event, nativeElement, renderer);
  };

  // We only need to add these event listeners if there are actual classes to apply
  if (activeClasses && activeClasses.length > 0) {
    ngZone.runOutsideAngular(() => {
      cleanupFns.push(renderer.listen(nativeElement, 'animationstart', handleEnterAnimationStart));
      cleanupFns.push(renderer.listen(nativeElement, 'transitionstart', handleEnterAnimationStart));
    });

    trackEnterClasses(nativeElement, activeClasses, cleanupFns);

    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