Skip to content

Enter and leave animations don't behave as expected with parent-child relationships #35825

@BeejeeDS

Description

@BeejeeDS

🐞 Bug report

Affected Package

@angular/animation or @angular/core

Is this a regression?

I've made a Stackblitz with Angular 9, 8 and 7. All versions have this problem.

Description

There is a problem when you nest a component with an :enter and :leave animation inside a parent which is conditionally visible using *ngIf. When the parent is visible for the first time there is no issue. Once you trigger the parent to leave and enter again, the child will not be visible.
It looks like the leave animation of the child gets triggered when the parent leaves but the enter animation isn't fired once the parent enters again.

🔬 Minimal Reproduction

I've made a simple example in Stackblitz. You can even make it less complex by removing the animations on the collapsible panel.
Stackblitz with Angular 17
Stackblitz with Angular 9
Stackblitz with Angular 8
Stackblitz with Angular 7

🌍 Your Environment

Angular 9 but it's also reproducible in 8 and 7.
Stackblitz contains my package versions.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: animationslegacy animations package only. Otherwise use area: core.freq3: hightype: bug/fix

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions