Angular Material v20 动画全部失效问题咨询

我刚留意到这个情况，不少开发者升级到Angular Material v20后都遇到了动画失效的问题，连官方文档里的组件动画也没正常运行——比如你提到的进度圈（progress spinner），v20版本里确实看不到v19那种流畅的旋转动画了。

这其实是Angular Material v20的一个重大默认行为变更：为了优化应用默认性能，官方把所有基于@angular/animations的组件内置动画默认关闭了。这个调整是有意为之的，目的是让不需要动画的场景能直接获得更轻量的加载体验，但确实让很多没注意到变更日志的开发者困惑了。

下面给你几个可行的解决办法：

• 全局启用所有动画
  在你的应用配置文件（比如app.config.ts）里，把原来的provideAnimations()替换成provideAnimationsAsync()，或者通过配置显式开启动画：

  import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
  // 或者使用同步版本的配置
  // import { provideAnimations } from '@angular/platform-browser/animations';
  
  export const appConfig: ApplicationConfig = {
    providers: [
      // 推荐使用异步版本，性能更优
      provideAnimationsAsync(),
      // 或者同步版本显式开启：
      // provideAnimations({ disableAnimations: false })
    ]
  };
  

• 针对单个组件启用动画
  如果你不想全局开启动画，也可以给特定组件添加属性强制启用动画。比如给进度圈组件加上[@.disabled]="false"：

  <mat-progress-spinner [@.disabled]="false" mode="indeterminate"></mat-progress-spinner>
  

• 检查动画依赖完整性
  确认你的项目里已经正确安装并导入了@angular/animations包，升级过程中偶尔会出现依赖遗漏的情况，可以重新安装确保依赖正常：

  npm install @angular/animations
  

目前官方正在逐步完善这个变更的文档说明，后续会在官方文档里更清晰地标注这个默认行为的调整。

内容来源于stack exchange