fix(animations): ensure multi-level leave animations work (#19455)

PR Close #19455

packages/animations/browser/src/dsl/animation.ts

@@ -8,7 +8,7 @@
 import {AnimationMetadata, AnimationMetadataType, AnimationOptions, ɵStyleData} from '@angular/animations';
 
 import {AnimationDriver} from '../render/animation_driver';
-import {ENTER_CLASSNAME, normalizeStyles} from '../util';
+import {ENTER_CLASSNAME, LEAVE_CLASSNAME, normalizeStyles} from '../util';
 
 import {Ast} from './animation_ast';
 import {buildAnimationAst} from './animation_ast_builder';
@@ -39,8 +39,8 @@ export class Animation {
     const errors: any = [];
     subInstructions = subInstructions || new ElementInstructionMap();
     const result = buildAnimationTimelines(
-        this._driver, element, this._animationAst, ENTER_CLASSNAME, start, dest, options,
-        subInstructions, errors);
+        this._driver, element, this._animationAst, ENTER_CLASSNAME, LEAVE_CLASSNAME, start, dest,
+        options, subInstructions, errors);
     if (errors.length) {
       const errorMessage = `animation building failed:\n${errors.join("\n")}`;
       throw new Error(errorMessage);

packages/animations/browser/src/dsl/animation_ast_builder.ts

@@ -60,8 +60,6 @@ export function buildAnimationAst(
   return new AnimationAstBuilderVisitor(driver).build(metadata, errors);
 }
 
-const LEAVE_TOKEN = ':leave';
-const LEAVE_TOKEN_REGEX = new RegExp(LEAVE_TOKEN, 'g');
 const ROOT_SELECTOR = '';
 
 export class AnimationAstBuilderVisitor implements AnimationDslVisitor {
@@ -476,8 +474,8 @@ function normalizeSelector(selector: string): [string, boolean] {
     selector = selector.replace(SELF_TOKEN_REGEX, '');
   }
 
-  selector = selector.replace(LEAVE_TOKEN_REGEX, LEAVE_SELECTOR)
-                 .replace(/@\*/g, NG_TRIGGER_SELECTOR)
+  // the :enter and :leave selectors are filled in at runtime during timeline building
+  selector = selector.replace(/@\*/g, NG_TRIGGER_SELECTOR)
                  .replace(/@\w+/g, match => NG_TRIGGER_SELECTOR + '-' + match.substr(1))
                  .replace(/:animating/g, NG_ANIMATING_SELECTOR);
 

packages/animations/browser/src/dsl/animation_timeline_builder.ts

@@ -17,6 +17,8 @@ import {ElementInstructionMap} from './element_instruction_map';
 const ONE_FRAME_IN_MILLISECONDS = 1;
 const ENTER_TOKEN = ':enter';
 const ENTER_TOKEN_REGEX = new RegExp(ENTER_TOKEN, 'g');
+const LEAVE_TOKEN = ':leave';
+const LEAVE_TOKEN_REGEX = new RegExp(LEAVE_TOKEN, 'g');
 
 /*
  * The code within this file aims to generate web-animations-compatible keyframes from Angular's
@@ -103,22 +105,24 @@ const ENTER_TOKEN_REGEX = new RegExp(ENTER_TOKEN, 'g');
  * the `AnimationValidatorVisitor` code.
  */
 export function buildAnimationTimelines(
-    driver: AnimationDriver, rootElement: any, ast: Ast<AnimationMetadataType>, enterClassName: string,
-    startingStyles: ɵStyleData = {}, finalStyles: ɵStyleData = {}, options: AnimationOptions,
+    driver: AnimationDriver, rootElement: any, ast: Ast<AnimationMetadataType>,
+    enterClassName: string, leaveClassName: string, startingStyles: ɵStyleData = {},
+    finalStyles: ɵStyleData = {}, options: AnimationOptions,
     subInstructions?: ElementInstructionMap, errors: any[] = []): AnimationTimelineInstruction[] {
   return new AnimationTimelineBuilderVisitor().buildKeyframes(
-      driver, rootElement, ast, enterClassName, startingStyles, finalStyles, options,
-      subInstructions, errors);
+      driver, rootElement, ast, enterClassName, leaveClassName, startingStyles, finalStyles,
+      options, subInstructions, errors);
 }
 
 export class AnimationTimelineBuilderVisitor implements AstVisitor {
   buildKeyframes(
-      driver: AnimationDriver, rootElement: any, ast: Ast<AnimationMetadataType>, enterClassName: string,
-      startingStyles: ɵStyleData, finalStyles: ɵStyleData, options: AnimationOptions,
-      subInstructions?: ElementInstructionMap, errors: any[] = []): AnimationTimelineInstruction[] {
+      driver: AnimationDriver, rootElement: any, ast: Ast<AnimationMetadataType>,
+      enterClassName: string, leaveClassName: string, startingStyles: ɵStyleData,
+      finalStyles: ɵStyleData, options: AnimationOptions, subInstructions?: ElementInstructionMap,
+      errors: any[] = []): AnimationTimelineInstruction[] {
     subInstructions = subInstructions || new ElementInstructionMap();
     const context = new AnimationTimelineContext(
-        driver, rootElement, subInstructions, enterClassName, errors, []);
+        driver, rootElement, subInstructions, enterClassName, leaveClassName, errors, []);
     context.options = options;
     context.currentTimeline.setStyles([startingStyles], null, context.errors, options);
 
@@ -450,7 +454,7 @@ export class AnimationTimelineContext {
   constructor(
       private _driver: AnimationDriver, public element: any,
       public subInstructions: ElementInstructionMap, private _enterClassName: string,
-      public errors: any[], public timelines: TimelineBuilder[],
+      private _leaveClassName: string, public errors: any[], public timelines: TimelineBuilder[],
       initialTimeline?: TimelineBuilder) {
     this.currentTimeline = initialTimeline || new TimelineBuilder(this._driver, element, 0);
     timelines.push(this.currentTimeline);
@@ -504,8 +508,8 @@ export class AnimationTimelineContext {
       AnimationTimelineContext {
     const target = element || this.element;
     const context = new AnimationTimelineContext(
-        this._driver, target, this.subInstructions, this._enterClassName, this.errors,
-        this.timelines, this.currentTimeline.fork(target, newTime || 0));
+        this._driver, target, this.subInstructions, this._enterClassName, this._leaveClassName,
+        this.errors, this.timelines, this.currentTimeline.fork(target, newTime || 0));
     context.previousNode = this.previousNode;
     context.currentAnimateTimings = this.currentAnimateTimings;
 
@@ -561,6 +565,7 @@ export class AnimationTimelineContext {
     }
     if (selector.length > 0) {  // if :self is only used then the selector is empty
       selector = selector.replace(ENTER_TOKEN_REGEX, '.' + this._enterClassName);
+      selector = selector.replace(LEAVE_TOKEN_REGEX, '.' + this._leaveClassName);
       const multi = limit != 1;
       let elements = this._driver.query(this.element, selector, multi);
       if (limit !== 0) {

packages/animations/browser/src/dsl/animation_transition_factory.ts

@@ -37,7 +37,8 @@ export class AnimationTransitionFactory {
 
   build(
       driver: AnimationDriver, element: any, currentState: any, nextState: any,
-      enterClassName: string, currentOptions?: AnimationOptions, nextOptions?: AnimationOptions,
+      enterClassName: string, leaveClassName: string, currentOptions?: AnimationOptions,
+      nextOptions?: AnimationOptions,
       subInstructions?: ElementInstructionMap): AnimationTransitionInstruction {
     const errors: any[] = [];
 
@@ -55,8 +56,8 @@ export class AnimationTransitionFactory {
     const animationOptions = {params: {...transitionAnimationParams, ...nextAnimationParams}};
 
     const timelines = buildAnimationTimelines(
-        driver, element, this.ast.animation, enterClassName, currentStateStyles, nextStateStyles,
-        animationOptions, subInstructions, errors);
+        driver, element, this.ast.animation, enterClassName, leaveClassName, currentStateStyles,
+        nextStateStyles, animationOptions, subInstructions, errors);
 
     if (errors.length) {
       return createTransitionInstruction(