bug(expansion-panel): Disable animation with [@.disabled]="true" stopped working in Angular 10

[BeniFreitag]

Reproduction

Steps to reproduce:

1. create a simple mat-expansion-panel like this

<mat-expansion-panel [@.disabled]="true">

2. Click on the header. You'll see an animation while the body is expanded.

Demo: see https://stackblitz.com/edit/mat-expansion-panel-10?file=src/app/expansion-overview-example.html (Angular 10)

Expected Behavior

Expand-Animation should be disabled. This worked in Angular 6 to 9.

Demo: see https://stackblitz.com/edit/mat-expansion-panel-9?file=src/app/expansion-overview-example.html (Angular 9)

Actual Behavior

Animation occurs when expanding.

Environment

• Angular: 10.2.4
• CDK/Material: 10
• Browser(s): Chrome 85
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[jelbourn]

This happened because we changed the expansion panel from using Angular animations to using plain CSS animations. You should still be able to disable the animation using NoopAnimationsModule, though.

[BeniFreitag]

Yes, using NoopAnimationsModule works.

[web265p3]

How can I disable animations only for the expansion panel? If I use NoopAnimationsModule all Animations of the application are gone. I tried CSS like proposed here, but this does not work:

mat-expansion-panel,
mat-expansion-panel * {
  transition: none !important;
}

[lilsnow]

https://stackblitz.com/edit/mat-expansion-panel-10-lgagfp?file=src%2Fapp%2Fexpansion-overview-example.html

[@.disabled]="true" is working