Mat-expansion panel is opened while been animated

[frct1]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/fork/components-issue

Steps to reproduce:

1. Add enter animation to mat-accordion
2. https://components-issue-wabdrn.stackblitz.io

Expected Behavior

While user see animation of entering mat-accordion: content of mat-expansion-panel should be hidden = panel should be closed.

Actual Behavior

Content of mat-expansion panel is opened in animation. After animation completed it's closing...

Environment

• Angular: 8.0.0 (same with 8.1.0)
• CDK/Material:
• Browser(s): Chrome 75
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[andrewseguin]

Root cause seems to be due to Angular's priority of executing parent animations before children animations, which means the expansion panel waits to set itself up. It makes sense to me to do a better job of initializing the expansion panel outside of animations to avoid this.

[frct1]

Hello there
Thank you for the answer. I will glad to see it fixed in next updates ;)

[meblum]

Same issue, having an expansion panel in a mat-dialog. When opening the dialog the expansion opens first and then closes.

[meblum]

Possible duplicate of #11765

[brankoEISI]

Same here.

[meblum]

Here’s an easy workaround that solved it for me #11765 (comment)

Add the css rules globally so it fixes the entire app.