fix(material/expansion): panel appearing as open when parent is animating away

[crisbeto]

Fixes an issue where the expansion panel will appear as if it is open, if the element is part of a component that is animating away. The issue comes from the fact that Angular resets the animation state to void which we don't have in the animation definitions.

Fixes #11765.

[ngbot[bot]]

Hi @crisbeto! This PR has merge conflicts due to recent upstream merges. Please help to unblock it by resolving these conflicts. Thanks!

[ngbot[bot]]

Hi @crisbeto! This PR has merge conflicts due to recent upstream merges. Please help to unblock it by resolving these conflicts. Thanks!

[ngbot[bot]]

Hi @crisbeto! This PR has merge conflicts due to recent upstream merges. Please help to unblock it by resolving these conflicts. Thanks!

[Teamop]

Hi @jelbourn @crisbeto , seems this PR hasn't been merged for a long time after being approved. For the checks, seems should rerun as a lot of them are just pending. Do you have other concerns to update? seems related to #13870

[stevenmcountryman]

Hi @jelbourn @crisbeto !

We're also desperately waiting for this to be merged in. All of our expansion panels are affected by this bug and it's very jarring.

[simeyla]

@crisbeto Been spending all afternoon playing around and trying to understand this issue.

Adding a class of .ng-animating { outline: 1px solid red; } gives me the following screenshot when animating my panel onscreen for the first time. So all the little expander icons and the panels themselves get :ng-animating which they're inheriting somehow.

Even if my slide animation on the 'outside' has an explicit css class and { limit: 1 } applied it still permeates into the accordion. The only way I managed to block it was by adding [@.disabled] to the accordion.`

What I'm really having a difficult time understanding is why all the controls inside accordion are able to inherit .ng-animating from the outside in the first place. If that's just the way angular works then isn't a change needed in that behavior to be able to get anywhere with fixing things like this? (and more complicated than what you said about void state?)

This is most frustrating because you think animating a panel off screen will take about 15 minutes to do and then everything exploded in my face (literally!!)

[am-awais]

Please Solve this Issue ASAP. Its really annoying!!!!!!

[crisbeto]

Rebased and bumping to a P2, because the issue keeps getting reported.

[andrewseguin]

I think there is an unintended side-effect of this change. If your expansion panel starts as expanded, you see the animation occur on the page when loaded.

You can see this if you change the demo's expansion panel to be expanded, then load the page. The animation will render, when I think what we expect is that the expansion panel just initializes as open.

<mat-expansion-panel class="demo-expansion-width" #myPanel
                     expanded
                     (afterExpand)="addEvent('afterExpand')"
                     (afterCollapse)="addEvent('afterCollapse')">

  ...

</mat-expansion-panel>

[BazylPL]

any news on that conflict?

[OlliHolli]

Seeing that this is still not merged I have found another workaround. When declaring the animations simply add fitting animationstates.

animations: [
	trigger( "detailExpand", [
		state( "collapsed", style( { height: "0px", minHeight: "0" } ) ),  
		state( "void", style( { height: "0px", minHeight: "0" } ) ),  
		state( "expanded", style( { height: "*" } ) ),  
		transition( "expanded <=> collapsed", animate( "225ms cubic-bezier(0.4, 0.0, 0.2, 1)" ) ),  
		transition( "expanded <=> void", animate( "225ms cubic-bezier(0.4, 0.0, 0.2, 1)" ) )  
		] )  
	]

Notice that I added a "void" state and transition.

It is duplicate code, but other than that I did not encounter any issues with it.