如何禁用Angular Material扩展面板的动画效果？

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>

- Chris K

---

@Chellappan "如何禁用Angular Material扩展面板动画？" - Chris K

你的问题是什么？你能否创建一个StackBlitz演示以演示你想要达到的目标？ - k.vincent

@k.vincent 我只想在单击展开面板时取消动画效果，仅此而已。 - Chris K

我不完全确定我是否理解你所指的动画，但是如果你想停用打开/关闭面板，则使用 <mat-expansion-panel [disabled]="isDisabled" [expanded]="true">...</mat-expansion-panel> 并在你的 *.component.ts 中添加一个属性 isDisabled = true;。 - k.vincent

@k.vincent，伙计你知道动画是什么意思吗？我想在单击面板时停用动画，只停用动画而不是整个面板。 - Chris K

Answer 1

2020-10-16更新：

根据Angular问题跟踪器的响应（https://github.com/angular/components/issues/20768），[@.disabled]=true不再起作用:

...我们将Expansion Panel从使用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

- chaos_monkey

---

你拯救了我的一天，伙计，谢谢你。 - Vignesh

你要如何修改动画的速度而不是禁用它？例如，使其变慢。 - Andres Gardiol

很棒的答案。禁用动画后性能有了很大提升。 - Arul Rozario

这似乎在Angular 10中出现了问题，但在Angular 9中可以正常工作：https://github.com/angular/components/issues/20768 - Benjamin Freitag

Answer 2

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

- Augusto Principe

---

这会禁用面板，而不是动画。 - undefined

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。

- santillanix

---

我给这个答案点了踩，因为问题是关于禁用扩展面板动画，而不是扩展面板本身。 - Gary