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: ` +