css - IE10/11 使用转换 :-webkit-transform?

Question

参见 this JSBin在 IE10 或 11 中。

如果您检查 #test 元素，您会看到它显示过渡属性为 -webkit-transform(并且不会发生过渡)。如果注释掉transition: -webkit-transform;声明，如图here , 然后过渡工作。

为什么 IE 不将供应商前缀值作为无效属性值删除？顺便说一下，如果我在 Chrome 上做类似的事情——比如说，在 -webkit-transition 之后放置 -ms-transition——它会按原样丢弃它，并且只使用-webkit-transition 声明。似乎只有在 IE 上才有这个问题。

Answer 1

我刚刚对此进行了更多研究，它看起来更像是一个 Chrome 错误，而不是关于 IE 的问题。

这是 spec 的内容说到 transition-property 中无法识别和不可动画的属性:

If one of the identifiers listed is not a recognized property name or is not an animatable property, the implementation must still start transitions on the animatable properties in the list using the duration, delay, and timing function at their respective indices in the lists for ‘transition-duration’, ‘transition-delay’, and ‘transition-timing-function’. In other words, unrecognized or non-animatable properties must be kept in the list to preserve the matching of indices.

规范似乎没有考虑没有指定的属性是受支持的或可设置动画的情况，甚至在过渡 propdefs 之后的部分也是如此。看起来 IE 将声明视为有效，尽管没有要转换的受支持属性，从而覆盖以前的声明，并有效地使声明等同于 transition-property: none (即结果是类似，但正如您所观察到的，该值实际上并未计算为 none)。

Firefox 的行为方式似乎与 IE 相同，将声明视为等同于 transition-property: none。

此外，如果您将无前缀和有前缀的 transform 属性名称放在同一个声明中，IE 和 Firefox 将很好地动画转换(顺序无关紧要):

transition: -webkit-transform 1s, transform 1s;

但是，如果您放置任何其他您希望与导致 Chrome 删除声明的无法识别的属性一起使用的属性......它仍然删除该声明。是的，IE 和 Firefox 在上述声明中正确应用了转换，Chrome 完全忽略了它。

不过，似乎只有未知的属性名称才有这个问题。例如，如果您指定一个受支持但不可设置动画的属性，例如 background-image:

transition: -webkit-transform 1s, background-image 1s;

Chrome 能够很好地为转换设置动画。

尽管如此，我仍然不能完全确定规范是否含糊不清，或者 IE 和 Firefox 中显示的行为实际上是否正确。听起来它可以使用任何一种方式进行一些澄清，所以我继续并 emailed CSSWG 关于此事。