CODEWITHSUNDEEP
angularangular-material
Chris K
Chris K

Reputation: 928

How to disable Angular Material Expansion Panel animations?

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>

Upvotes: 6

Views: 16663

Answers (3)

chaos_monkey
chaos_monkey

Reputation: 367

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

Upvotes: 23

Augusto Principe
Augusto Principe

Reputation: 29

This worked to me <mat-expansion-panel [disabled]="'true'">

Upvotes: 1

santillanix
santillanix

Reputation: 2014

Expansion panels can be disabled using the disabled attribute. A disabled expansion panel can't be toggled by the user, but can still be manipulated programmatically.

<mat-expansion-panel [disabled]="true">
  <mat-expansion-panel-header>
    Settings
  </mat-expansion-panel-header>
    Some content
<mat-expansion-panel>

Just add [disabled]="condition" in <mat-expansion-panel> tag

info taken from oficial documentation: https://material.angular.io/components/expansion/overview

Upvotes: -5

Related Questions