jquery - 如何使用 jquery 为 react-bootstrap 进度条设置动画？

Question

我需要你的帮助，使这个进度条动画从 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;

这是输出：

标签： jqueryreactjsbootstrap-4

Answer 1

你可以使用animated道具。我认为这就足够了。为了清楚起见，附上一个代码框。

https://codesandbox.io/s/upbeat-diffie-ghizg?file=/src/App.js