[Expansion] Arrow animation missing in 5.0.5

[nicolasguilhem]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Rotation animation of the arrow in mat-expansion-panel-header.

What is the current behavior?

Arrow on the right of the mat-expansion-panel-header doesn't animates.

What are the steps to reproduce?

http://plnkr.co/edit/zIEeYb?p=preview

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

Animation was working in previous version.

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

all including Angular Material 5.0.0-rc.1

Is there anything else we should know?

[nicolasguilhem]

animation doesn't work with @angular/animations @5.0.5 (see https://stackblitz.com/angular/xkgonrebbpl)
animation works with @angular/animations @4.4.6 (see https://stackblitz.com/edit/angular-y2h6b6)

[crisbeto]

This looks like a regression in 5.0.5. There are couple of other animations that don't work correctly (the fade in on mat-select and mat-menu). The issue seems to happen on elements with multiple running animations at the same time.

[josephperrott]

This is actually the result of an upstream bug here: angular/angular#20946

[DanielYKPan]

Actually, I think this is because the parent animation block the child animation.
According to Angular Doc, Each time an animation is triggered in angular, the parent animation will always get priority and any child animations will be blocked.

In this case, the [@expansionHeight] (parent animation) blocks the [@indicatorRotate] (child animation).

[DanielYKPan]

I have already used animateChild() to fix it. How could I pull the request?

[crisbeto]

Thanks for the heads-up @DanielYKPan. I've submitted a PR since there are a couple more components that have similar issues.