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>
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
这对我有用 <mat-expansion-panel [disabled]="'true'">
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.