特定于浏览器的前缀，在变换时带有 CSS 过渡答案

【问题标题】：Browser-specific prefixes with a CSS transition on transform特定于浏览器的前缀，在变换时带有 CSS 过渡
【发布时间】：2014-01-07 06:47:57
【问题描述】：

根据 caniuse.com 的说法，对于那些同时支持 CSS transition 和 CSS transform 的浏览器，组合起来至少有三种不同的类型：

在transition 和transform 上都需要-webkit- 前缀的那些（例如Safari 6、Android 浏览器
只需要在transform 上加上-webkit- 前缀（例如Chrome 3x）。
两者都不需要前缀（例如 FF 和 IE10/11）。

如何安全地编写我的transition 样式，以便在每种类型中正确解析它们？我看到两个选项：

-webkit-transition: -webkit-transform 300ms;
        transition: -webkit-transform 300ms, transform 300ms;

或

-webkit-transition: -webkit-transform 300ms;
        transition: -webkit-transform 300ms;
        transition: transform 300ms;

现在由于类型 2 和类型 3 浏览器，我需要为 both -webkit-transform 和 transform 进行无前缀转换。第一个选项的问题是我担心类型 2 和类型 3 浏览器将无法解析第二行，因为它们将始终包含无法识别的属性。问题是，浏览器如何处理transition 中的无效属性——忽略整个transition 样式还是跳过无效属性？

我认为可以通过将其分成两个属性来缓解这种情况，这样如果一个属性不可解析，它将被忽略。除了第二个选项有点冗长之外，我仍然想知道，在类型 2 浏览器的情况下，第三个 transition 是否无法解析并将transition“重置”回 null。

你知道它们的表现如何吗？此外，当 Chrome et al. 从 -webkit-transform 切换到无前缀的 transform 时，其中哪些是未来兼容的？

【问题讨论】：

标签： css cross-browser css-transitions css-transforms

【解决方案1】：

我相信无法识别的转换前缀会被简单地跳过，直到找到可识别的前缀。

我目前正在将它用于一个网站，它对我们有用。

CSS

.viewElement{
   -webkit-transform: translatex(0) translatey(500px);
   -moz-transform: translatex(0) translatey(500px);
   -o-transform: translatex(0) translatey(500px);
   -ms-transform: translatex(0) translatey(500px);
   transform: translatex(0) translatey(500px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0.0;
   -webkit-transition: all .8s ease-out;
   -moz-transition: all .8s ease-out;
   -o-transition: all .8s ease-out;
   -ms-transition: all .8s ease-out;
   transition: all .8s ease-out;
}

【讨论】：

嗯，我认为您是正确的，但这并不能真正回答过渡中的无效属性是否会使整个过渡或仅该属性上的过渡无效。我也不能使用“全部”，因为有些属性我不想转换。

【解决方案2】：

更新通知不幸的是，在本文发布时，Safari 并未遵循以下 W3 规范中概述的标准，并且在转换后包括 webkit 前缀属性和无前缀属性将导致它破裂并且根本没有动画。我仍在探索这个问题以获得一个好的通用解决方案，但看起来在 Safari 修复此问题之前，可能不会有一个适用于任何地方以及所有未来属性的解决方案，而无需使用 JavaScript 动态调整每个浏览器的 CSS 规则。

如果您将无法识别或无效的属性添加到转换属性列表中，列表中的有效属性仍会添加（Safari 除外，请参阅上面的通知）。

根据 w3 Specification for CSS Transitions 的第 2.1 节：

如果列出的标识符之一不是可识别的属性名称或不是动画属性，则实现仍必须在列表中的动画属性上使用持续时间、延迟和计时函数在它们各自的索引处开始转换“transition-duration”、“transition-delay”和“transition-timing-function”的列表。

W3 Specification for CSS Transitions

如果你采用下面的样式，尽管前面有一个无效且无法识别的属性，但 width 属性仍然会被动画化。

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 是在转换之后出现的，所以它肯定必须加上前缀，我们可以省略不带前缀的 transform 属性（虽然我不认为它离开它会很痛）。只有在识别出无前缀转换时才会应用第二条规则，在这种情况下，将应用浏览器识别的右侧属性，即使列表中的其他属性未被识别。

您的第二种方法存在缺陷，因为无论右侧的任何属性是否被识别，第二条规则都会被第三条规则覆盖。

我相信浏览器前缀属性的完整列表可以保证您在所有有能力的浏览器上应用 2s 的转换来转换，但请阅读下面的原因，因为它恰好是这个属性对的整洁偶然：

-webkit-transition: -webkit-transform 2s;
   -moz-transition:    -moz-transform 2s;
     -o-transition:      -o-transform 2s;
        transition:         transform 2s;

注意没有-ms-transition这样的东西，但是有-ms-transform。话虽这么说，直到 10 年才将转换添加到 IE，其中 -ms-transform 也因无前缀转换而过时。因此对于 IE，我们唯一需要的规则是“transition: transform”。
我还要注意，任何时候我们有一个用于转换的浏览器前缀（
由于 Firefox 在发布无前缀转换的同时发布了无前缀转换，因此我们不需要在无前缀“转换”右侧添加前缀“-moz-transform”。
Opera 在某些时候除了 -o- 之外还使用 -webkit- 前缀进行转换，但是他们在版本 15 中开始使用 -webkit-transform，在版本 12.1 中开始使用无前缀转换之后，因此我们不需要包含-o-transition 之后的 -webkit-transform。另外，由于 Opera 在 12.1 版本之后只使用了无前缀或 -webkit-transform，所以我们不需要在无前缀转换之后包含 -o-transform。
在这种情况下，我们不必在无前缀转换的右侧包含 -webkit-transform，因为仅识别 -webkit-transform 的浏览器将回退到 -webkit-transition 并仍然应用此属性。

如果您不介意 CSS 的长度，以下应该是一个安全的通用解决方案，用于确保正确的浏览器过渡前缀和右侧前缀属性。 更新通知 事实证明，这种方法在 Safari 上可能不安全，因为它们不遵循 W3 标准，即忽略转换右侧无法识别的属性（如果有一个前缀和一个不带前缀） .

-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;

【讨论】：

很好，经过充分研究的答案。不过，关于这个错误，即使 Safari 错误地使整个 transition 规则无效，它是否仍会退回到 -webkit-transition: -webkit-transform 规则？或者您是说transition 中无法识别的属性使这两个规则都无效？
@Kevin Christopher Henry：它仍然会退回到-webkit-transition: -webkit-transform 规则，是的。您也可以通过将无前缀的transition 声明分成两部分来解决此问题：一份用于-webkit-transform，另一份用于transform。值得补充的是 all WebKit strains, including Blink, suffer from this problem - 不仅仅是 Safari。
另外，我怎么直到今天才注意到这个问题和答案？我最终选择了answering a later question myself...
在 iOS 7.1 上测试。一旦错误发生，Safari 确实会回退到“-webkit-transition”并正常工作。