IE10/11 使用 transition:-webkit-transform?

Question

在 IE10 或 11 中查看此 JSBin 。

如果您检查#test元素，您会看到它显示的 transition 属性为-webkit-transform （并且没有发生过渡）。 如果您注释掉transition: -webkit-transform; 声明，如在这里，然后过渡工作。

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

Answer 1

我只是对此进行了更多研究，它看起来更像是 Chrome 错误而不是 IE。

以下是规范中关于transition-property无法识别和不可动画transition-property ：

如果列出的标识符之一不是可识别的属性名称或不是可动画的属性，则实现仍必须在列表中的相应索引处使用持续时间、延迟和计时函数在列表中的可动画属性上开始转换，以便 '过渡持续时间”、“过渡延迟”和“过渡时间函数”。 换句话说，无法识别或不可动画的属性必须保留在列表中以保留索引的匹配。

该规范似乎没有考虑到指定的属性都不受支持或可动画的情况，甚至在转换 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 中显示的行为实际上是否正确。 听起来无论哪种方式都可以进行一些澄清，所以我已经继续向 CSSWG发送了有关此事的电子邮件。