React Bootstrap：如何实现ProgressBar递增动画，重置为0时无动画？

这个问题我之前做项目时也碰到过，React Bootstrap的ProgressBar默认会对所有数值变化触发过渡动画，确实会在从100重置到0时造成视觉困惑。核心思路就是区分「递增阶段」和「重置阶段」的动画行为，下面给你两个实用的实现方案：

方案一：通过key属性强制重置组件（最简洁） #

React的key属性用来标识组件的唯一性，当key变化时，React会销毁旧组件并重新挂载新组件。我们可以把进度的“循环周期”作为key，每完成一次从0到100的循环就更新一次key，这样重置到0时组件会直接从初始状态开始，不会有反向动画。

示例代码：

import { useState, useEffect } from 'react';
import ProgressBar from 'react-bootstrap/ProgressBar';

function CycleProgressBar() {
  const [progress, setProgress] = useState(0);
  const [cycleKey, setCycleKey] = useState(0); // 标记循环周期的key

  useEffect(() => {
    const progressTimer = setInterval(() => {
      setProgress(prev => {
        if (prev >= 100) {
          // 完成一个循环，更新key并重置进度
          setCycleKey(prevKey => prevKey + 1);
          return 0;
        }
        return prev + 1;
      });
    }, 50);

    return () => clearInterval(progressTimer);
  }, []);

  return (
    <ProgressBar
      key={cycleKey} // 循环更新key，强制组件重新挂载
      now={progress}
      animated={progress > 0 && progress < 100} // 仅递增过程启用动画
      striped
    />
  );
}

这个方案的好处是代码简单直观，不需要处理复杂的状态切换，适合绝大多数场景。

方案二：动态控制动画属性+延迟重置进度 #

如果不想重新挂载组件（比如需要保留组件的自定义状态或事件绑定），可以通过先关闭动画、重置进度、再重新开启动画的步骤实现：

import { useState, useEffect, useRef } from 'react';
import ProgressBar from 'react-bootstrap/ProgressBar';

function ControlledProgressBar() {
  const [progress, setProgress] = useState(0);
  const [isAnimated, setIsAnimated] = useState(true);
  const isResetting = useRef(false); // 标记是否处于重置状态

  useEffect(() => {
    const progressTimer = setInterval(() => {
      if (isResetting.current) return;

      setProgress(prev => {
        if (prev >= 100) {
          isResetting.current = true;
          // 先关闭动画
          setIsAnimated(false);
          // 延迟重置进度（给DOM时间应用无动画状态）
          setTimeout(() => {
            setProgress(0);
            // 重置完成后重新开启动画
            setIsAnimated(true);
            isResetting.current = false;
          }, 50);
          return prev;
        }
        return prev + 1;
      });
    }, 50);

    return () => clearInterval(progressTimer);
  }, []);

  return (
    <ProgressBar
      now={progress}
      animated={isAnimated}
      striped
    />
  );
}

这里用isResetting的ref来避免重置过程中触发重复的定时器逻辑，确保状态切换的顺序正确。

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