如何在页面加载时将 react-bootstrap 进度条从 0 设置为动画？

Question

我正在为进度条使用 react-bootstrap ui 库。我希望它在页面加载时将进度条从 0 动画化到 70。

如何实现？

这是代码

Component.js

<ProgressBar
        animated
        now={70}
        className="progress-bar"
      />

Component.style

.progress-bar {
  width: 400px;
}

预期输出： 它应该在页面加载时从 0 到 70 进行动画处理。

Answer 1

animate 属性不会动画化进度条，但会动画化进度条上的条纹。

来自docs:

Animate's the stripes from right to left

你需要的是一个更新 now 属性的定时器。大概是这样的：

const MyComp = () => {
 const [progressNow, setProgressNow] = useState(0)

 const updateProgressNowHandler = setInterval(() => {
  if (progressNow >= 70 ){
   setProgressNow(70)
   clearInterval(updateProgressNowHandler)
  }
  setProgressNow(s => s+1)
 }, 50)

 return 
  <ProgressBar
        animated
        now={progressNow}
        className="progress-bar"
      />
}

这绝不是生产就绪。

您需要确保在卸载组件时清除间隔。

如果组件有可能被重新渲染（这很可能会发生），您需要跟踪已经取得的进展并从最后一个值的计数器开始。

如何在页面加载时将 react-bootstrap 进度条从 0 设置为动画？

How do I animate react-bootstrap progress bar from 0 to N on page load?

javascript

twitter-bootstrap

reactjs

react-bootstrap