特定于浏览器的前缀，在转换时具有 CSS 过渡

Question

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

1. 那些在transition和transform上都需要-webkit-前缀的人(例如 Safari 6、Android 浏览器<4.4)。
2. 那些只需要在transform上使用-webkit-前缀(例如 Chrome 3x)。
3. 那些两者都不需要前缀的(例如 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 浏览器，我需要为-webkit-transform和transform进行无前缀转换。第一个选项的问题在于我担心类型 2 和类型 3 浏览器将无法解析第二行，因为它们将始终包含无法识别的属性。问题是，浏览器如何处理transition中的无效属性 - 忽略整个transition样式或只是跳过无效属性？

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

知道这些通常如何表现吗？另外，当Chrome等人从-webkit-transform切换到无前缀transform时，其中哪些是符合未来的？

Answer 1

更新通知不幸的是，在这篇文章发布时，事实证明 Safari 并没有遵循下面 W3 规范中概述的标准，并且在过渡后同时包含 webkit 前缀属性和无前缀属性将导致它中断并且根本不动画。我仍在探索这个问题以获得一个好的通用解决方案，但看起来在 Safari 解决此问题之前，可能没有一个可以在任何地方以及所有未来的属性中工作，而无需使用 JavaScript 动态调整每个浏览器的 CSS 规则。

---

如果将无法识别或无效的属性添加到过渡属性列表中，则列表中仍会添加有效属性(Safari 浏览器除外，请参阅上面的通知)。

根据 w3 CSS 转换规范的第 2.1 节：

如果列出的标识符之一不是可识别的属性名称或不是可动画属性，则实现仍必须使用持续时间、延迟和计时函数在"过渡持续时间"、"过渡延迟"和"过渡计时函数"列表中的相应索引处对列表中的可动画属性启动转换。

W3 CSS 过渡规范

如果采用以下样式，则尽管前面有一个无效且无法识别的属性，但 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 属性(尽管我认为离开它不会有什么坏处)。仅当识别出无前缀的过渡时，才会应用第二条规则，在这种情况下，将应用浏览器识别的右侧属性，即使无法识别列表中的其他属性也是如此。

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

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

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

1. 请注意，没有 -ms-transition 这样的东西，但有一个 -ms-transform。话虽如此，直到 10 年才将过渡添加到 IE 中，其中 -ms-transform 也被无前缀的转换过时了。因此，对于IE，我们唯一需要的规则是"转换：转换"。

2. 我还要注意，任何时候我们都有一个用于过渡的浏览器前缀(

由于 Firefox 在发布无前缀

3. 转换的同时发布了无前缀转换，因此我们不需要在无前缀的"转换"右侧使用带前缀的"-moz-transform"。

4. 除了 -o- 之外，Opera在某些时候还使用了-webkit-前缀进行转换，但是在12.1版本中开始使用无前缀转换后，他们在版本15开始使用-webkit-transform，因此我们不需要在-o-transition之后包含-webkit-transform。另外，由于 Opera 在 12.1 版本之后只使用无前缀或 -webkit-transform，因此我们不需要在无前缀转换之后包含 -o-transform。

5. 在这种情况下，我们不必在无前缀转换的右侧包含 -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;

Answer 2

我相信无法识别的过渡前缀会被简单地跳过，直到找到一个公认的过渡前缀。

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

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