Question

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

-webkit-和transition上需要transform前缀的内容（例如Safari 6，Android浏览器＆lt; 4.4）。
只需要-webkit-上的transform前缀的用户（例如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浏览器，我需要为 -webkit-transform 和 transform设置无前缀的转换。第一个选项的问题是我担心类型2和类型3浏览器将无法解析第二行，因为它们将始终包含无法识别的属性。问题是，浏览器如何处理transition内的无效属性 - 忽略整个transition样式或只是跳过无效属性？

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

一般来说，这些表现如何？此外，当Chrome et al。从-webkit-transform切换到无前缀transform时，其中哪些符合未来标准？

Answer 1

更新通知不幸的是，本文发布时Safari并未遵循下面W3规范中列出的明确标准，并且包括webkit前缀属性和无前缀属性过渡将导致它破裂而根本不动画。我仍在探索这个问题以获得一个很好的通用解决方案，但看起来好像Safari修复了这个问题，可能没有一个可以在任何地方工作，并且对于所有未来的属性，没有用JavaScript动态调整每个浏览器的CSS规则。

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

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

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

W3 Specification for CSS Transitions

如果采用以下样式，则尽管前面有无效且无法识别的属性，但仍会为width属性设置动画。

transition: garbageProperty 2s, width 2s;

如果您遵循包含其他转换规则的转换规则（具有相同的前缀或缺少转发规则），则第一条规则将被覆盖，即使第二条规则仅列出了无效的属性，也不再应用在右边。

如果您尝试以下样式，宽度将不会被设置动画，因为第一个规则将被第二个规则覆盖，因为＆＃34; garbageProperty＆＃34;不被承认。

transition: width 2s; transition: garbageProperty 2s;

基于此，我相信你的第一种方法是正确的。

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

只有在识别出-webkit-transition时才会应用第一条规则，在这种情况下，由于转换在转换后出现，它肯定必须加上前缀，我们可以省略未加前缀的转换属性（尽管我不会这样做）认为离开它会有害。）只有在识别出无前缀转换时才会应用第二条规则，在这种情况下，即使列表中的其他属性无法识别，也会应用浏览器识别的右侧属性中的任何一个。

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

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

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

1）注意没有-ms-transition这样的东西，但是有一个-ms-transform。这就是所谓的过渡没有被添加到IE直到10，其中-ms-transform也因未加前缀的变换而过时。因此，对于IE，我们需要的唯一规则是＆＃34; transition：transform＆＃34;。

2）我还要注意，只要我们有转换的浏览器前缀（＆lt; Chrome 26，＆lt; Firefox 16，＆lt; Safari 6.1，＆lt; Opera 12.1），那么转换肯定仍然是前缀（＆lt; Chrome 36，＆lt; Firefox 16，所有Safari，＆lt; Opera 23），这意味着我们可以根据前缀规则取消未加修饰的转换版本。

3）由于Firefox在没有前缀的转换的同时发布了无前缀的转换，因此我们不需要带前缀的＆＃34; -moz-transform＆＃34;在未加前映的＆＃34;过渡＆＃34;的右侧。
4）除了-o-之外，Opera在某些时候使用-webkit-前缀进行转换，但是他们在版本15中开始使用-webkit-transform后开始在版本12.1中使用无前缀转换，所以我们不需要在-o-transition之后包含-webkit-transform。此外，由于Opera在版本12.1之后仅使用无前缀或-webkit-transform，因此在无前缀转换之后我们不需要包含-o-transform。

5）在这种情况下，我们不必将-webkit-transform包含在无前缀转换的右侧，因为只识别-webkit-tranform的浏览器将回退到-webkit-transition并仍然应用此属性。 / p>

如果您不介意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;
}

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

2 个答案: