angular - 如何禁用 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) 的响应:

...we changed the expansion panel from using Angular animations tousing plain CSS animations...

我认为现在正确的方法是将以下样式添加到您的全局 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"

绑定(bind)到您的 元素以禁用给定面板的动画。

在这里阅读更多: https://angular.io/api/animations/trigger#disabling-animations