如何禁用 Angular Material Expansion Panel 动画？

Question

单击扩展面板时如何禁用动画？ 我试过这个：

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

还有这个：

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

但是没有人为我工作，动画仍然在这里。

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

Answer 1

2020-10-16 更新：

[@.disabled]=true 将不再起作用 - 基于来自 Angular 问题跟踪器 ( https://github.com/angular/components/issues/20768 ) 的响应：

...我们将扩展面板从使用 Angular 动画更改为使用纯 CSS 动画...

我认为现在正确的方法是将以下样式添加到您的全局styles.css文件中（或根据需要确定它们的范围）：

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

像这里（基于 Benjamin 的示例）： https : //stackblitz.com/edit/mat-expansion-panel-10-lgagfp?file= src/ styles.scss

旧答案：

你可以加

[@.disabled]="true"

绑定到您的<mat-expansion-panel>元素以禁用给定面板的动画。

在此处阅读更多信息： https : //angular.io/api/animations/trigger#disabling-animations

Answer 2

这对我有用 <mat-expansion-panel [disabled]="'true'">

Answer 3

可以使用 disabled 属性禁用扩展面板。 用户无法切换禁用的扩展面板，但仍可以通过编程方式进行操作。

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

只需在<mat-expansion-panel>标签中添加[disabled]="condition"

取自官方文档的信息： https ://material.angular.io/components/expansion/overview