如何使用jquery设置react引导进度条的动画？

我需要你的帮助，使这个进度条从0开始动画到现在的值我已经尝试了一个小时的jquery代码，但动画没有表现出应有的方式。需要你们的帮助。先谢谢你

import $ from 'jquery';
import ProgressBar from 'react-bootstrap/ProgressBar';

function ProgressBar() {
var delay = 1500;
$(".progress-bar").each(function(){
    $(this).animate( { width: $(this).attr('aria-valuenow') + '%' }, delay );
});
return (
<ProgressBar className="ProgressBar" now={95} />
<ProgressBar className="ProgressBar" now={55} />
<ProgressBar className="ProgressBar" now={50} />
);
}

export default ProgressBar;

import$from'jquery'；
从“react bootstrap/ProgressBar”导入ProgressBar；
函数ProgressBar（）{
var延迟=1500；
$（“.progress bar”）。每个（函数（）{
$（this.animate（{width:$（this.attr（'aria-valuenow'）+'%%}，延迟）；
});
返回(
);
}
导出默认进度条；

以下是输出：

---

您可以使用

动画

道具。我想那就足够了。附加一个代码沙盒以保持清晰

---

您可以考虑使用HTML5<代码> < /C>元素。它的行为将非常可预测，您所要做的就是更新

值

属性。我不确定，但我相信你也可以用CSS调整它的外观。

元素的文档：