6

请参阅IE10 或 11 中的此 JSBin

如果您检查该#test元素,您会看到它显示转换属性为-webkit-transform(并且转换不会发生)。如果您注释掉transition: -webkit-transform;声明,如此处所示则转换有效。

为什么 IE 不将供应商前缀值作为无效属性值删除?顺便说一句,如果我在 Chrome 上做类似的事情——比如说,放在-ms-transition——-webkit-transition它应该放弃它,并且只使用-webkit-transition声明。似乎只有在 IE 上才有这个问题。

4

1 回答 1

8

我只是对此进行了更多研究,它看起来更像是一个 Chrome 错误,而不是关于 IE 的东西。

以下是规范中关于无法识别和不可动画的属性的说明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 发送了有关此问题的电子邮件。

于 2014-03-17T15:03:06.953 回答