如何实现页面加载时react-bootstrap进度条从0到指定值的动画效果

react-bootstrap 自带的 animated 属性仅用于控制进度条的条纹流动效果，不会触发进度值变化的过渡动画，你可以通过 React 状态配合 CSS 过渡实现需求：

1. 修改组件逻辑，用状态控制进度值 #

将进度条的now属性绑定到React状态，初始值设为0，组件挂载完成后更新为70，触发宽度变化：

import { useState, useEffect } from 'react';
import ProgressBar from 'react-bootstrap/ProgressBar';
import './Component.style.css';

function MyComponent() {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    // 组件挂载后更新进度值
    setProgress(70);
  }, []);

  return (
    <ProgressBar
      animated // 不需要条纹流动效果可删除该属性
      now={progress}
      className="custom-progress-wrap"
    />
  );
}

如果是类组件，对应在componentDidMount生命周期中修改状态即可，逻辑一致。

2. 调整CSS样式，添加过渡效果 #

给进度条的填充区域添加宽度过渡属性，让宽度变化时自动生成平滑动画：

/* 进度条容器样式，设置总宽度 */
.custom-progress-wrap {
  width: 400px;
}
/* 匹配react-bootstrap内置的进度填充区域类，添加过渡效果 */
.custom-progress-wrap .progress-bar {
  /* 1.2s为动画时长，可根据需求调整 */
  transition: width 1.2s ease-in-out;
}

原理解释 #

• 组件首次渲染时进度值为0，填充区域宽度为0%
• 组件挂载完成后进度值更新为70，填充区域宽度变为70%
• CSS的transition属性会监听width属性的变化，自动生成从0到70%的平滑过渡动画

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