mat-expansion-panel's content hides immediately, outrunning the panel's animation

[jimmyzzxhlh]

Bug, feature request, or proposal:

Bug
This is basically another version of issue 10134.

What is the expected behavior?

When hiding the expansion panel using animations, the header and the content of the expansion panel should both respect the animations.

What is the current behavior?

Only the header respects the animation, the body doesn't.
Notice that showing expansion panel using animation does work correctly.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-hmgomu

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

This is a bug found when we try to define some fade-in/fade-out animation for the expansion panel.

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

Angular Material 5.2.6

Is there anything else we should know?

N/A.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}