mat-expansion-panel "opens" with angular enter-leave animations, although current state is closed.

[bencbradshaw]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Mat-expansion-panel, when animating in or out, will stay in current state of opened or closed and render as such.

What is the current behavior?

mat-expansion-panel, when animating out, will open and display all hidden panel content, while still showing the current state as closed.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-ykxmcr?file=src%2Fapp%2Fhero-list-multistep.component.ts

What is the use-case or motivation for changing an existing behavior?

Keeping the panel closed when animating out provides a much cleaner experience for the UI by preventing jumpiness and inconsistencies.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

@angular/core 6.0.4
@angular/material 6.2.1
@angular/cdk 6.2.1
Chrome 67.0.3396.79
Firefox 60.0.2
Safari 11.1

Is there anything else we should know?

This happens with all animations I have tested, not just the one provided in the stackblitz example.

[aeslinger0]

Possibly related... I'm seeing something similar where the expansion panel is visible in a dialog as the dialog animates open. So it may appear that the animation does not have to applied directly to the expansion panel to see this behavior.

[kiwikern]

I have created an example for a router transition which illustrates the same problem:

https://stackblitz.com/edit/angular-expansion-panel-with-route-transition-animation?file=app%2Fapp%2Fapp.component.html

[thw0rted]

Any updates on this? I thought maybe I had to specify something in my transition animations to cause everything to trigger in the right order, but if that's the case, I can't figure out what. I'd like to see an example of transitions that don't cause this behavior, if anybody has it working.