[英]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>
Update 2020-10-16: 2020-10-16 更新:
[@.disabled]=true won't work any more - based on response from Angular issue tracker ( https://github.com/angular/components/issues/20768 ): [@.disabled]=true 将不再起作用 - 基于来自 Angular 问题跟踪器 ( https://github.com/angular/components/issues/20768 ) 的响应:
...we changed the expansion panel from using Angular animations to using plain CSS animations... ...我们将扩展面板从使用 Angular 动画更改为使用纯 CSS 动画...
I think the proper approach now would be to add the following styles to your global styles.css
files (or scope them as needed):我认为现在正确的方法是将以下样式添加到您的全局styles.css
文件中(或根据需要确定它们的范围):
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像这里(基于 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.绑定到您的<mat-expansion-panel>元素以禁用给定面板的动画。
Read more here: https://angular.io/api/animations/trigger#disabling-animations在此处阅读更多信息: https : //angular.io/api/animations/trigger#disabling-animations
这对我有用 <mat-expansion-panel [disabled]="'true'">
Expansion panels can be disabled using the disabled attribute.可以使用 disabled 属性禁用扩展面板。 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只需在<mat-expansion-panel>
标签中添加[disabled]="condition"
info taken from oficial documentation: https://material.angular.io/components/expansion/overview取自官方文档的信息: https ://material.angular.io/components/expansion/overview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.