Expansion panel FOUC when contained in dialog

[SamuelMS]

I'm submitting a...

[x] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

Expansion panels currently render with a flash of unstyled content (FOUC) when nested in a dialog -- they always temporarily appear as expanded, regardless of what the "expanded" attribute is set to. After a moment, all expansion panels that have been explicitly set to closed collapse.

This only occurs in Angular / Material 7.

Expected behavior

Expansion panels should appear as collapsed when the dialog opens when expanded=false instead of briefly appearing as expanded, then collapsing after a delay.

Minimal reproduction of the problem with instructions

Click the button and note the flash of unstyled content in the dialog in Angular 7.

Angular 7 (bugged): https://angular-egzwfw.stackblitz.io
Angular 6 (correct): https://angular-eepzxs.stackblitz.io

What is the motivation / use case for changing the behavior?

Flashes of unstyled content are jarring and feel very buggy.

Environment

Angular version: 7.0.1
Material version: 7.0.2
TypeScript: 3.1.1


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [x] Firefox version XX
- [x] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

[crisbeto]

Might potentially be solved by #11778.

[crisbeto]

I tried it out and it doesn't look like it'll be fixed by #11778.

[josephperrott]

Reopening as the fix was reverted.

This seems to be a larger issue across our library as our components use animations to set state quite frequently.