可以使用CSS3过渡效果来动画化表尺标签的值吗？

Question

只使用CSS是否可能在值改变时动画地更改仪表/进度标记的可视化效果？

类似于这样的效果：

-webkit-transition: all 1s linear;

或者

-webkit-transition: meter-value 1s linear;

- Christian Tellnes

Answer 1

是的，这完全有可能，因为WebKit使用Shadow DOM来实现计量元素，而不是使用默认系统元素（这样计量器和进度条可以被样式化）。你可以将其视为计量元素内部的隐藏内容：

<div pseudo="-webkit-meter-inner-element">
    <div pseudo="-webkit-meter-bar">
        <div pseudo="-webkit-meter-optimum-value" style="width: 46%;"></div>
    </div>
</div>

当您更改计量器的值时，WebKit将更改最后一个div的宽度。因此使用：

meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value {
    transition: 1s width;
}

您可以为您的计量表添加动画效果。

- leops

---

谢谢，永远不会太晚。如果我三年前知道这个就好了。 - Christian Tellnes

这个应该更新为正确的答案。 - nverba

当我写这段代码时，计量器/进度条元素仅适用于Webkit浏览器。 - leops

Answer 2

不，CSS只用于更改页面的表现形式，而值是页面内容的一部分，必须直接在HTML中指定或通过JavaScript进行操作。

编辑：我稍微误解了你的问题，但答案仍然是一样的。CSS转换只用于动画化CSS属性，无法从CSS访问元素的值。

- casablanca

---

这是关于演示的问题，即当值发生变化时是否可以进行动画处理 - 使用CSS3，例如通过Javascript更改其类，可以对元素进行动画处理。 - Harmen

Answer 3

不，这是不可能的，因为该属性不支持作为“transition-property”。证明： w3.org。

- Harmen