平滑动画 javascript 堆叠进度条，不闪烁

Question

什么是让堆叠的进度条平滑动画而不闪烁的好方法？

我目前正在使用 Bootstrap，更改宽度样式（使用 Knockout）。 示例：https://jsbin.com/lewuzewupo/2/edit?html,console,output 我的问题是，如果你看的时间够长，右边的绿条会闪烁。这似乎是因为动画导致它在中间的深蓝色条出现和消失时被推到右侧。

（我已经尝试了所有我能想到的方法来确保堆叠条的总数在任何时候都不会超过 100。如果我停止使用进度条类并使用我自己的会导致类似的外观，但是没有动画，则闪烁为零，并且条形稳定，始终总计 100。）

那么在 Bootstrap 中是否有解决该问题的解决方法，或者创建堆叠进度条的替代方法，看起来和 Bootstrap 一样漂亮并且动画流畅？

[编辑：添加调试以证明我的百分比总和为 100]

Answer 1

我想我以前遇到过这种事情 - 归结为“完整”文本。基本上，它不能很好地计算出宽度。 2 个想法。

1. 去掉“完整”的文字应该没问题。

2. 尝试仅在特定时间后显示完成，并且值已降至特定比率。

抱歉，帮不上忙。