diff --git a/packages/animations/browser/src/render/transition_animation_engine.ts b/packages/animations/browser/src/render/transition_animation_engine.ts index 52f12b1e695..6d8fd23c0b4 100644 --- a/packages/animations/browser/src/render/transition_animation_engine.ts +++ b/packages/animations/browser/src/render/transition_animation_engine.ts @@ -1034,7 +1034,14 @@ export class TransitionAnimationEngine { // instead stretch the first keyframe gap until the animation starts. This is // important in order to prevent extra initialization styles from being // required by the user for the animation. - instruction.timelines.forEach(tl => tl.stretchStartingKeyframe = true); + const timelines: AnimationTimelineInstruction[] = []; + instruction.timelines.forEach(tl => { + tl.stretchStartingKeyframe = true; + if (!this.disabledNodes.has(tl.element)) { + timelines.push(tl); + } + }); + instruction.timelines = timelines; subTimelines.append(element, instruction.timelines); diff --git a/packages/core/test/animation/animation_query_integration_spec.ts b/packages/core/test/animation/animation_query_integration_spec.ts index f78982407c2..4eb9803d832 100644 --- a/packages/core/test/animation/animation_query_integration_spec.ts +++ b/packages/core/test/animation/animation_query_integration_spec.ts @@ -3309,14 +3309,14 @@ describe('animation query tests', function() { }) class Cmp { exp: any = ''; - disableExp = false; + disabledExp = false; } TestBed.configureTestingModule({declarations: [Cmp]}); const fixture = TestBed.createComponent(Cmp); const cmp = fixture.componentInstance; - cmp.disableExp = true; + cmp.disabledExp = true; fixture.detectChanges(); resetLog(); @@ -3363,14 +3363,14 @@ describe('animation query tests', function() { }) class Cmp { exp: any = ''; - disableExp = false; + disabledExp = false; } TestBed.configureTestingModule({declarations: [Cmp]}); const fixture = TestBed.createComponent(Cmp); const cmp = fixture.componentInstance; - cmp.disableExp = true; + cmp.disabledExp = true; fixture.detectChanges(); resetLog(); @@ -3386,6 +3386,63 @@ describe('animation query tests', function() { expect(p2.duration).toEqual(1000); expect(p2.element.classList.contains('parent')).toBeTrue(); }); + + it('should disable the animation for the given element regardless of existing parent element animation queries or child element animation queries', + () => { + @Component({ + selector: 'some-cmp', + template: ` +
+
+
+
+
+ `, + animations: [ + trigger( + 'parentAnimation', + [ + transition( + '* => go', + [query('@*', animateChild()), animate(1500, style({opacity: 0}))]), + ]), + trigger( + 'childAnimation', + [ + transition('* => go', [animate(1000, style({opacity: 0}))]), + ]), + trigger( + 'grandChildAnimation', + [ + transition('* => go', [animate(500, style({opacity: 0}))]), + ]), + ] + }) + class Cmp { + exp: any = ''; + disabledExp = false; + } + + TestBed.configureTestingModule({declarations: [Cmp]}); + + const fixture = TestBed.createComponent(Cmp); + const cmp = fixture.componentInstance; + cmp.disabledExp = true; + fixture.detectChanges(); + resetLog(); + + cmp.exp = 'go'; + fixture.detectChanges(); + + const players = getLog(); + expect(players.length).toEqual(2); + + const [p1, p2] = players; + expect(p1.duration).toEqual(500); + expect(p1.element.classList.contains('grand-child')).toBeTrue(); + expect(p2.duration).toEqual(1500); + expect(p2.element.classList.contains('parent')).toBeTrue(); + }); }); }); });