如何禁用 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