是否可以使用CSS3过渡来为米标签的值设置动画？

Question

如果值改变,是否可以使用css将视觉变化设置为米/进度标记的动画？

像这样的东西

-webkit-transition: all 1s linear;

要么

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

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;
}

您可以为您的仪表设置动画.

Answer 2

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

编辑：我稍微误解了你的问题，但答案仍然是一样的。CSS 过渡仅用于为 CSS 属性设置动画，并且无法从 CSS 访问元素的值。