更新通知很遗憾,在发布本文时,Safari并没有遵循下面W3规范所提供的标准。在过渡之后包含既有webkit前缀属性又有无前缀属性会导致它不能被动画化。我仍在探讨一个很好的通用解决方案,但看起来除非Safari解决了这个问题,否则可能没有一种可以在所有情况下工作,并且适用于所有未来属性而不需要使用JavaScript动态调整CSS规则。
如果您将一个未被识别或无效的属性添加到过渡属性列表中,列表中的有效属性仍会被添加(除了Safari,请参见上文的通知)。
根据CSS过渡的W3规范第2.1节:
如果列出的标识符之一不是被认可的属性名称或不是可动画的属性,则实现必须仍使用各自在“transition-duration”、“transition-delay”和“transition-timing-function”的列表中的索引处的持续时间、延迟和计时功能在可动画属性的过渡上开始过渡。
CSS过渡的W3规范
如果您采用以下样式,宽度属性仍将被动画化,尽管在其前面有一个无效且未被识别的属性。
transition: unrecognizedProperty 2s, width 2s;
如果您使用另一个转换规则(具有相同的前缀或缺乏前缀)遵循转换规则,则第一个规则将被覆盖,并且即使右侧列出的第二个规则仅具有无效属性,也不再适用。
如果您尝试以下样式,则宽度将不会进行动画处理,因为第一个规则将被第二个规则覆盖,该规则实际上什么都不做,因为“unrecognizedProperty”无法识别。
transition: width 2s;
transition: unrecognizedProperty 2s;
根据这个,我相信你的第一种方法是正确的。
-webkit-transition: -webkit-transform 300ms;
transition: -webkit-transform 300ms, transform 300ms;
如果浏览器识别-webkit-transition,则仅应用第一条规则,在这种情况下,由于transform是在transition之后推出的,因此它肯定必须加前缀,我们可以省略未经前缀的transform属性(尽管我认为保留它也不会有问题)。如果识别到未经前缀的过渡,则仅应用第二条规则,在这种情况下,无论列表中的其他属性是否被识别,都将应用浏览器识别的右侧属性。
您的第二种方法存在缺陷,因为第二条规则始终会被第三条规则覆盖,而与右侧属性是否被识别无关。
我认为要确保在所有能力的浏览器上应用2秒转换过渡的完整浏览器前缀属性列表如下,但请阅读以下理性,因为仅对于这个属性对而言这只是偶然的方便:
-webkit-transition: -webkit-transform 2s;
-moz-transition: -moz-transform 2s;
-o-transition: -o-transform 2s;
transition: transform 2s;
请注意,-ms-transition 并不存在,但有 -ms-transform。也就是说,在 IE10 之前,transition 并未添加,而 -ms-transform 也已被不带前缀的 transform 取代。因此,在 IE 中,我们只需要一条规则:“transition: transform”。
我还要指出,每当我们为 transition 添加浏览器前缀时(< Chrome 26、< Firefox 16、< Safari 6.1、< Opera 12.1),那么 transform 也肯定仍然带有前缀(< Chrome 36、< Firefox 16、所有 Safari、< Opera 23),这意味着我们可以在带前缀的规则后省略不带前缀的 transform 版本。
由于 Firefox 在发布不带前缀的 transition 同时也发布了不带前缀的 transform,所以我们在不带前缀的“transition”右侧不需要加上前缀“-moz-transform”。
某个版本的 Opera 还额外使用了 -webkit- 前缀来添加 transform,不过在版本 15 开始,他们开始使用 -webkit-transform,此前在版本 12.1 中使用了带前缀的 transition,因此我们不需要在 -o-transition 之后包含 -webkit-transform。而且由于 Opera 在版本 12.1 之后仅使用不带前缀或 -webkit-transform,因此我们不需要在不带前缀的 transition 后包含 -o-transform。
在这种情况下,我们不必在不带前缀的 transition 右侧添加 -webkit-transform,因为只识别 -webkit-tranform 的浏览器会回退到 -webkit-transition 并仍然应用该属性。
但如果你不介意 CSS 的长度,以下内容是确保过渡和右手属性带有正确浏览器前缀的安全通用解决方案。 更新通知:由于 Safari 不遵循 W3 标准,在转换属性右侧存在一个带有前缀和一个不带前缀的属性时,忽略未识别的属性,因此这种方法在 Safari 上可能不安全。
-webkit-transition: -webkit-property,
property;
-moz-transition: -moz-property,
property;
-ms-transition: -ms-property,
property;
-o-transition: -o-property,
-webkit-property,
property;
transition: -webkit-property,
-moz-property,
-ms-property,
-o-property,
property;
transition
規則,它還是會退回到-webkit-transition: -webkit-transform
規則嗎?或者你是說transition
中無法識別的屬性無效了兩個規則嗎? - Kevin Christopher Henry