CSS过渡计数器？

Question

我在页面上有各种进度条。目前，我的栏受 a 影响，transition因此当进度发生变化时，它会平滑地移动到新值。

该栏还包含其进度，以百分比表示。

我面临的“问题”是当条形宽度转换时，显示的数字会从一个值跳到另一个值，所以我想知道 CSS 是否有任何方法可以“转换”数字。

我能想到的唯一解决方案是使用

counter-reset: tmpcounter 50;
content: counter(tmpcounter);
transition: counter-reset 0.5s ease;

当然，这行不通。即使这样做了，它也只适用于伪元素，因此当值发生变化时，我无法用 JavaScript 修改它。

我是否遗漏了什么，还是不值得为此担心？

Answer 1

我不确定我是否理解跳跃数字的问题。但是这个类似温度计的进度条示例有帮助吗？