如何在Angular Material中实现无动画打开MatDialog弹窗

嘿，刚好碰到过类似需求，给你两个简单有效的实现方式：

方案一：通过MatDialogConfig直接禁用动画（推荐） #

Angular Material的MatDialogConfig本身就提供了disableAnimations属性，直接设置为true就能关闭弹窗的打开/关闭动画，这是官方最推荐的方式，代码改动最小：

public openForgotDialog(): void { 
  const dialogConfig = new MatDialogConfig(); 
  dialogConfig.width = '450px'; 
  dialogConfig.panelClass = "dialog-container"; 
  // 添加这一行禁用动画
  dialogConfig.disableAnimations = true;
  const dialog = this.matDialog.open(ForgotComponent, dialogConfig); 
}

方案二：通过CSS覆盖动画效果 #

如果需要全局禁用所有MatDialog的动画，或者想通过样式层面控制，可以给你的自定义panelClass添加动画禁用样式：

在全局样式文件（比如styles.scss）里添加：

.dialog-container {
  // 禁用弹窗容器的动画
  animation: none !important;
  // 同时覆盖背景遮罩的动画（如果需要的话）
  & + .cdk-overlay-backdrop {
    animation: none !important;
  }
}

这种方式适合需要批量控制多个弹窗动画的场景，不需要修改每个弹窗的TS代码。

两种方案都能实现无动画的效果，优先推荐方案一，因为它是官方提供的配置项，更符合Angular Material的设计规范~

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