是否可以使用CSS3转换来动画meter-tag的值？

如果该值发生变化，是否可以使用css将视觉变化设置为电表/进度标签？是否可以使用CSS3转换来动画meter-tag的值？

财产以后这样

-webkit-transition: all 1s linear;

或者

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

来源

2010-11-02 Christian Tellnes

没有，CSS只是为了改变演示页面的，而值是页面的内容的一部分，并且必须直接在HTML中指定或通过JavaScript进行操作。

编辑：我稍微误解了你的问题，但答案保持不变。 CSS转换仅用于CSS属性的动画，并且不可能从CSS访问元素的值。

来源

2010-11-02 23:08:55 casablanca

这是关于演示，问题是如果可以在值更改时设置动画 - 使用CSS3可以通过使用Javascript更改其类来动画元素，例如 – Harmen 2010-11-02 23:10:26

@Harmen：感谢您的高举。 – casablanca 2010-11-02 23:14:38

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

来源

2010-11-02 23:14:50 Harmen

是的，这是完全可能的，因为WebKit使用Shadow DOM来实现meter元素，而不是使用默认系统（因此可以对仪表和进度条进行样式化）。你可以算作为仪表元件内部的隐藏内容：

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

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

来源

2013-09-20 12:55:02 leops

谢谢，永远不会太迟。如果三年前我才知道这件事。 – 2013-09-20 18:17:37

这应该可能更新为正确的答案。 – nverba 2014-04-11 10:17:27

-1为了提供另一个愚蠢的Webkit单独的路线... – mate64 2014-06-18 21:08:25

是否可以使用CSS3转换来动画meter-tag的值？

回答

相关问题