bootstrap中的进度条跳动和不准确?(包括小提琴示范)

Progress bars in bootstrap are jumpy and inaccurate? (fiddle demonstration included)

本文关键字：包括小提琴不准确 bootstrap 更新时间：2023-09-26

所以我今天才发现了bootstrap，并开始将他们的UI元素合并到我的web应用程序中。不幸的是，我在他们的进度条上遇到了一点麻烦。我不知道是不是只有我这么想，但他们看到的是神经质、不准确和口吃。这里有一个小提琴供参考:

https://jsfiddle.net/v255fwkz/2/

如果你点击Run，然后点击Start，至少在我测试的所有浏览器上，第一个完成的速度比第二个快几秒钟，尽管它们都需要10秒。而且，最上面的那个在开始的时候放大了，最后变慢了。整个速度都不一样。还有，第三个根本不管用。10秒后，它会立即下降。

理想情况下，我想使用顶部的版本，因为它更流畅，但在我的应用程序中，我需要这是一些准确的，因为它的功能作为一个计时器的用户，所以我恐怕我将不得不使用底部的。希望我只是把代码弄乱了或者遗漏了什么。也许我应该从bootstrap切换到其他东西?

不是关于bootstrap的问题，这是因为你的持续时间低于你的间隔:transition: width .6s ease;

另一个重要的事情是缓动，如果你有一个非线性缓动，时序函数将影响结果。最后，您需要在第一个间隔之前首先调用您的$("#second").css("width", value + "%");。

小提琴:https://jsfiddle.net/v255fwkz/4/