如何减慢或移除Angular Material Stepper的步骤切换动画？

当然可以修改Angular Material Stepper点击下一步/上一步时的动画速度，核心是通过自定义CSS覆盖组件的默认过渡样式，具体实现方法如下：

1. 定位动画相关的CSS类 #

Angular Material的Stepper组件，无论是水平还是垂直类型，其步骤切换的动画效果都由CSS过渡属性控制：

• 水平Stepper依赖.mat-horizontal-stepper-content类的transition属性
• 垂直Stepper依赖.mat-vertical-stepper-content类的transition属性

2. 自定义样式覆盖默认动画 #

在你的组件样式文件（如xxx.component.scss）中添加以下代码，调整动画时长：

/* 修改水平Stepper的切换动画速度，将0.8s改为你需要的时长 */
:host ::ng-deep .mat-horizontal-stepper-content {
  transition: transform 0.8s cubic-bezier(0.35, 0, 0.25, 1);
}

/* 如果是垂直Stepper，使用这个选择器 */
:host ::ng-deep .mat-vertical-stepper-content {
  transition: transform 0.8s cubic-bezier(0.35, 0, 0.25, 1);
}

• 调整0.8s这个值即可改变动画速度：数值越小动画越快，越大则越慢
• cubic-bezier()是动画的缓动曲线，你也可以根据需求替换成ease、linear等预设值

3. 样式优先级说明 #

• 使用:host ::ng-deep可以确保自定义样式能穿透组件封装，覆盖Angular Material的默认样式，不需要依赖!important
• 如果你的项目禁用了::ng-deep，可以通过在全局样式文件中添加自定义样式，或者提高选择器的特异性来实现覆盖

内容的提问来源于stack exchange，提问作者Assustadora de Código