有没有办法在值增加时让引导进度条动画，但在重置为 0 时没有？

Posted 2023-03-06

【中文标题】有没有办法在值增加时让引导进度条动画，但在重置为 0 时没有？

【英文标题】：Is there a way to have a bootstrap progress bar animate when increasing in value, but not when resetting to 0?

【发布时间】：2015-04-15 02:32:33

【问题描述】：

如果我有一个引导进度条从 0% 循环到 100%，然后相对较快地回到 0%，那么当“重置为 0%”动画完成时，新值已经在 ~40% 左右，所以产生的效果使进度条看起来好像在 40% 到 100% 到 40% 到 100% 之间弹跳，等等......

有没有办法让进度条在增加其值时动画，但在减少值时进行离散“跳跃”？如果没有，有没有其他方法可以达到同样的效果？

【参考方案1】：

我最终使用 AngularJS 的 ng-class 指令解决了我的问题。 Here 就是一个例子。

还有一个解决方案的sn-p：

<div class='progress'>
<div class='progress-bar' ng-class=\"'no-animations': counter == 0, 'animated': counter != 0\" role='progressbar' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' ng-style=\"width: counter + '%'\">
<span>Action: counter%</span>
</div>
</div>