wip

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

@@ -36,6 +36,7 @@ export abstract class Ast {
 export class TriggerAst extends Ast {
   public queryCount: number = 0;
   public depCount: number = 0;
+  public hasLeaveQueries?: boolean;
 
   constructor(public name: string, public states: StateAst[], public transitions: TransitionAst[]) {
     super();

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

@@ -9,14 +9,14 @@ import {AUTO_STYLE, AnimateTimings, AnimationAnimateChildMetadata, AnimationAnim
 
 import {AnimationDriver} from '../render/animation_driver';
 import {getOrSetAsInMap} from '../render/shared';
-import {ENTER_SELECTOR, LEAVE_SELECTOR, NG_ANIMATING_SELECTOR, NG_TRIGGER_SELECTOR, SUBSTITUTION_EXPR_START, copyObj, extractStyleParams, iteratorToArray, normalizeAnimationEntry, resolveTiming, validateStyleParams} from '../util';
+import {ENTER_SELECTOR, LEAVE_SELECTOR, NG_ANIMATING_SELECTOR, NG_TRIGGER_SELECTOR, SUBSTITUTION_EXPR_START, LEAVE_TOKEN, SELF_TOKEN, copyObj, extractStyleParams, iteratorToArray, normalizeAnimationEntry, resolveTiming, validateStyleParams} from '../util';
 
 import {AnimateAst, AnimateChildAst, AnimateRefAst, Ast, DynamicTimingAst, GroupAst, KeyframesAst, QueryAst, ReferenceAst, SequenceAst, StaggerAst, StateAst, StyleAst, TimingAst, TransitionAst, TriggerAst} from './animation_ast';
 import {AnimationDslVisitor, visitAnimationNode} from './animation_dsl_visitor';
 import {parseTransitionExpr} from './animation_transition_expr';
 
-const SELF_TOKEN = ':self';
 const SELF_TOKEN_REGEX = new RegExp(`\s*${SELF_TOKEN}\s*,?`, 'g');
+const LEAVE_TOKEN_REGEX = new RegExp(`\s*${LEAVE_TOKEN}\s*,?`, 'g');
 
 /*
  * [Validation]
@@ -82,6 +82,7 @@ export class AnimationAstBuilderVisitor implements AnimationDslVisitor {
       TriggerAst {
     let queryCount = context.queryCount = 0;
     let depCount = context.depCount = 0;
+    let leaveQueryCount = context.leaveQueryCount = 0;
     const states: StateAst[] = [];
     const transitions: TransitionAst[] = [];
     metadata.definitions.forEach(def => {
@@ -108,6 +109,7 @@ export class AnimationAstBuilderVisitor implements AnimationDslVisitor {
     ast.options = normalizeAnimationOptions(metadata.options);
     ast.queryCount = queryCount;
     ast.depCount = depCount;
+    ast.hasLeaveQueries = context.leaveQueryCount > 0;
     return ast;
   }
 
@@ -405,6 +407,10 @@ export class AnimationAstBuilderVisitor implements AnimationDslVisitor {
         parentSelector.length ? (parentSelector + ' ' + selector) : selector;
     getOrSetAsInMap(context.collectedStyles, context.currentQuerySelector, {});
 
+    if (LEAVE_TOKEN_REGEX.test(selector)) {
+      context.leaveQueryCount++;
+    }
+
     const entry = visitAnimationNode(this, normalizeAnimationEntry(metadata.animation), context);
     context.currentQuery = null;
     context.currentQuerySelector = parentSelector;
@@ -454,6 +460,7 @@ export type StyleTimeTuple = {
 
 export class AnimationAstBuilderContext {
   public queryCount: number = 0;
+  public leaveQueryCount: number = 0;
   public depCount: number = 0;
   public currentTransition: AnimationTransitionMetadata|null = null;
   public currentQuery: AnimationQueryMetadata|null = null;

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

@@ -8,16 +8,14 @@
 import {AUTO_STYLE, AnimateChildOptions, AnimateTimings, AnimationOptions, AnimationQueryOptions, ɵPRE_STYLE as PRE_STYLE, ɵStyleData} from '@angular/animations';
 
 import {AnimationDriver} from '../render/animation_driver';
-import {copyObj, copyStyles, interpolateParams, iteratorToArray, resolveTiming, resolveTimingValue} from '../util';
+import {copyObj, copyStyles, interpolateParams, iteratorToArray, resolveTiming, resolveTimingValue, ENTER_TOKEN, LEAVE_TOKEN} from '../util';
 
 import {AnimateAst, AnimateChildAst, AnimateRefAst, Ast, AstVisitor, DynamicTimingAst, GroupAst, KeyframesAst, QueryAst, ReferenceAst, SequenceAst, StaggerAst, StateAst, StyleAst, TimingAst, TransitionAst, TriggerAst} from './animation_ast';
 import {AnimationTimelineInstruction, createTimelineInstruction} from './animation_timeline_instruction';
 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');
 
 /*

packages/animations/browser/src/render/transition_animation_engine.ts

@@ -56,6 +56,10 @@ export interface QueueInstruction {
 }
 
 export const REMOVAL_FLAG = '__ng_removed';
+export const ANIMATION_EXPANDO_PROP = '__ng_animate';
+
+interface TriggerInfoExpando { hasLeaveQueries?: boolean; }
+const ROOT_EXPANDO: TriggerInfoExpando = {};
 
 export interface ElementAnimationState {
   setForRemoval: any;
@@ -201,6 +205,12 @@ export class AnimationTransitionNamespace {
       toState.absorbOptions(fromState.options);
     }
 
+    // this means that this is the first time the trigger was assigned to the
+    // element and therefore the query details should be reflected into the expando
+    if (trigger.ast.hasLeaveQueries && !triggersWithStates.hasOwnProperty(triggerName)) {
+      element[ANIMATION_EXPANDO_PROP].hasLeaveQueries = true;
+    }
+
     triggersWithStates[triggerName] = toState;
 
     if (!fromState) {
@@ -616,6 +626,11 @@ export class TransitionAnimationEngine {
   insertNode(namespaceId: string, element: any, parent: any, insertBefore: boolean): void {
     if (!isElementNode(element)) return;
 
+    // 1. If node contains animations then merge with parent expando
+    // 2. otherwise look at the parent expando and copy that over
+    const expando: TriggerInfoExpando = parent && parent[ANIMATION_EXPANDO_PROP] || ROOT_EXPANDO;
+    element[ANIMATION_EXPANDO_PROP] = insertBefore ? Object.create(expando) : expando;
+
     // special case for when an element is removed and reinserted (move operation)
     // when this occurs we do not want to use the element for deletion later
     const details = element[REMOVAL_FLAG] as ElementAnimationState;
@@ -769,7 +784,9 @@ export class TransitionAnimationEngine {
     if (this.totalAnimations && this.collectedEnterElements.length) {
       for (let i = 0; i < this.collectedEnterElements.length; i++) {
         const elm = this.collectedEnterElements[i];
-        addClass(elm, STAR_CLASSNAME);
+        if (elm[ANIMATION_EXPANDO_PROP].hasLeaveQueries) {
+          addClass(elm, STAR_CLASSNAME);
+        }
       }
     }
 

packages/animations/browser/src/util.ts

@@ -9,6 +9,9 @@ import {AnimateTimings, AnimationMetadata, AnimationOptions, sequence, ɵStyleDa
 
 export const ONE_SECOND = 1000;
 
+export const ENTER_TOKEN = ':enter';
+export const LEAVE_TOKEN = ':leave';
+export const SELF_TOKEN = ':self';
 export const SUBSTITUTION_EXPR_START = '{{';
 export const SUBSTITUTION_EXPR_END = '}}';
 export const ENTER_CLASSNAME = 'ng-enter';

packages/core/test/animation/animation_query_integration_spec.ts

@@ -2877,6 +2877,10 @@ export function main() {
         expect(p1.element.classList.contains('container')).toBeTruthy();
         expect(p2.element.classList.contains('item')).toBeTruthy();
       });
+
+      it('should only track *star directives', () => {
+      });
+
     });
 
     describe('animation control flags', () => {