[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.

[ClemensSchneider]

Will there be some way to add animations to custom-elements that are used in projected content, for example in a <mat-expansion-panel-header> element?

Usecase is, that I added a customized expaned-indicator that uses its own animation. This worked up until @angular/animations 5.0.2 and is broke since 5.0.3.

[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.}