如何修改Angular Material mat-progress-bar动画使其从0而非100开始加载？

问题原因 #

这个现象是*mat-progress-bar*的默认初始化逻辑导致的：组件首次挂载时会先执行一个从100%到设定值的入场过渡动画，所以会出现先闪100%再回落至40%的视觉效果。只需要跳过这个默认入场逻辑，手动控制值的赋值时机即可实现从0到目标值的递增效果。 #

推荐解决方案：动态绑定+延迟赋值 #

该方案无侵入，不需要修改组件默认样式或全局配置：

1. 调整模板，把固定value改为动态绑定：

<mat-progress-bar mode="determinate" [value]="progressValue"></mat-progress-bar>

2. 组件TS代码中控制值的赋值时机：

import { Component, OnInit } from '@angular/core';

@Component({
  // 你的原有组件配置
})
export class YourComponent implements OnInit {
  // 初始值先设为0
  progressValue = 0;

  ngOnInit(): void {
    // 延迟到下一个事件循环赋值，跳过组件默认入场动画
    setTimeout(() => {
      this.progressValue = 40;
    }, 0);
  }
}

说明：setTimeout延迟值设为0即可，作用是等进度条组件完成首次渲染后再赋值目标值，此时组件会直接触发从0到40%的递增动画，不会再触发默认的100%入场动画。

其他可选方案 #

方案1：直接操作进度条实例 #

如果需要更精细的动画控制，可以通过模板引用直接操作组件实例：

1. 模板添加引用标识：

<mat-progress-bar #progressBar mode="determinate"></mat-progress-bar>

2. TS中获取实例并控制赋值：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatProgressBar } from '@angular/material/progress-bar';

@Component({
  // 你的原有组件配置
})
export class YourComponent implements AfterViewInit {
  @ViewChild('progressBar') progressBar!: MatProgressBar;

  ngAfterViewInit(): void {
    this.progressBar.value = 0;
    setTimeout(() => {
      this.progressBar.value = 40;
    }, 0);
  }
}

方案2：全局禁用过渡动画（不推荐） #

如果不需要进度条的所有过渡动画效果，可以在样式中覆盖默认配置：

::ng-deep .mat-progress-bar-fill::after {
  transition: none !important;
}

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