How to disable Angular Material Expansion Panel animations?

Question

How to disable the animation when you click on the expansion panel? I tried this:

::ng-deep .mat-expansion-panel-header {
    transition: none !important; 
}

and also this:

::ng-deep .mat-expansion-panel-body {
    transition: none !important; 
}

But none are working for me, animation is still here.

<mat-expansion-panel>
  <mat-expansion-panel-header>
    Settings
  </mat-expansion-panel-header>
    Some content
<mat-expansion-panel>

Answer 1

Update 2020-10-16:

[@.disabled]=true won't work any more - based on response from Angular issue tracker (https://github.com/angular/components/issues/20768):

...we changed the expansion panel from using Angular animations to using plain CSS animations...

I think the proper approach now would be to add the following styles to your global styles.css files (or scope them as needed):

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

Like here (based on the sample by Benjamin): https://stackblitz.com/edit/mat-expansion-panel-10-lgagfp?file=src/styles.scss

Old answer:

You can add

[@.disabled]="true"

binding to your <mat-expansion-panel> element to disable animations for the given panel.

Read more here: https://angular.io/api/animations/trigger#disabling-animations