我之前也在Angular Material 5.x版本里折腾过禁用动画的事儿，尤其是MatDialog的动画，给你分享几个亲测有效的解决方案：

全局禁用所有Material组件动画 #

如果想彻底关掉所有Material组件的动画，最简单的办法是把根模块里的BrowserAnimationsModule替换成NoopAnimationsModule。这个空动画模块会完全跳过所有动画执行，自然也就没有MatDialog的入场退场效果了。

示例代码（AppModule中）：

import { NgModule } from '@angular/core';
// 替换掉原来的BrowserAnimationsModule
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { MatDialogModule } from '@angular/material/dialog';

@NgModule({
  imports: [
    NoopAnimationsModule,
    MatDialogModule,
    // 其他业务模块...
  ]
})
export class AppModule { }

仅禁用MatDialog的动画（局部控制） #

要是只想关掉MatDialog的动画，不想影响其他组件的动画效果，可以试试下面两种方法：

方法1：自定义panelClass覆盖动画样式 #

在打开MatDialog时指定一个自定义类，然后在全局样式里覆盖掉Dialog的动画规则：

首先，在打开Dialog的组件里添加panelClass配置：

import { MatDialog } from '@angular/material/dialog';
import { YourDialogComponent } from './your-dialog.component';

// 组件内的打开Dialog逻辑
constructor(private dialog: MatDialog) {}

openCustomDialog() {
  this.dialog.open(YourDialogComponent, {
    panelClass: 'no-animation-dialog' // 自定义类名
  });
}

然后在全局样式文件（比如styles.css）中添加样式：

/* 禁用Dialog容器的动画 */
.no-animation-dialog.mat-dialog-container {
  animation: none !important;
  transition: none !important;
}

/* 可选：禁用背景遮罩的动画 */
.no-animation-dialog + .mat-dialog-backdrop {
  animation: none !important;
  transition: none !important;
}

方法2：正确使用[@.disabled]指令 #

你之前试的@.disabled没效果，大概率是没把它用在正确的元素上。MatDialog的内容组件是你自己定义的，所以可以在Dialog组件的最外层元素上添加这个指令，关掉内容区域的动画：

比如你的Dialog组件模板（your-dialog.component.html）：

<div [@.disabled]="true">
  <h1 mat-dialog-title>Dialog标题</h1>
  <div mat-dialog-content>这里是Dialog内容...</div>
  <div mat-dialog-actions>
    <button mat-button>取消</button>
    <button mat-button>确认</button>
  </div>
</div>

不过这个方法只能控制Dialog内容的动画，如果要关掉Dialog本身的入场/退场动画，还是用方法1更彻底。

内容的提问来源于stack exchange，提问作者kimondoe