我只是对此进行了更多研究,它看起来更像是一个 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 发送了有关此问题的电子邮件。