Angular 6中Mat-Dialog在Chrome浏览器开启动画卡顿问题求助

针对你遇到的Mat-Dialog在Chrome中开启动画缓慢的问题，除了禁用动画外，这里有几个实用的解决思路，亲测有效：

• 优先升级Angular Material版本
  6.0.1是比较早期的版本，Angular Material团队在后续的6.x补丁版本（比如6.4.7）以及更高版本中，针对Chrome的动画渲染性能做了不少优化。升级到同大版本的最新稳定版，大概率能直接解决这个问题，而且不需要修改太多业务代码，是最省心的方案。

• 优化Dialog的入场动画CSS，触发GPU加速
  Chrome对CSS 3D变换的硬件支持更好，默认的Dialog动画可能用的是2D变换，容易导致重绘卡顿。你可以自定义动画覆盖默认样式，用translate3d代替translate来触发GPU加速：

  /* 在全局styles.css中添加 */
  @keyframes custom-dialog-open {
    from {
      opacity: 0;
      transform: translate3d(0, 20px, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  
  .mat-dialog-container {
    animation: custom-dialog-open 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  }
  

  同时也可以简化背景遮罩的动画，减少渲染压力：

  @keyframes custom-backdrop-fade {
    from { opacity: 0; }
    to { opacity: 0.48; }
  }
  
  .mat-dialog-backdrop {
    animation: custom-backdrop-fade 0.2s ease-out !important;
  }
  

• 降低Dialog内容的渲染复杂度
  如果Dialog内部包含大量DOM元素或复杂组件，动画期间Chrome需要同时处理动画和内容渲染，容易卡顿。可以试试：

  • 给Dialog组件设置ChangeDetectionStrategy.OnPush，减少不必要的变更检测；
  • 延迟加载非关键内容，比如用*ngIf在动画完成后再渲染部分组件：

    // 在Dialog组件中
    isAnimationComplete = false;
    
    ngAfterViewInit() {
      // 监听动画完成事件
      const container = document.querySelector('.mat-dialog-container');
      container?.addEventListener('animationend', () => {
        this.isAnimationComplete = true;
        this.cdRef.detectChanges();
      });
    }
    

    模板里用*ngIf="isAnimationComplete"包裹非核心内容。

• 临时调整Chrome实验性渲染设置（仅用于测试）
  有些Chrome的实验性特性可能干扰动画渲染，你可以在地址栏输入chrome://flags/，找到Composite after paint选项并禁用它，重启Chrome后测试动画是否流畅。不过这个是临时方案，不适合推广到用户环境。

这些方法都不需要完全禁用动画，能在保留交互体验的前提下解决Chrome中的卡顿问题。

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