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

Question

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

1. 那些需要-webkit-在两个前缀transition和transform(例如野生6,Android浏览器<4.4).
2. 那些只需要-webkit-前缀的transform(例如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节:

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

CSS转换的W3规范

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

transition: garbageProperty 2s, width 2s;

如果您遵循具有其他转换规则的转换规则(具有相同的前缀或缺少该转换规则),则第一条规则将被覆盖并且不再应用,即使第二条规则仅在右侧列出了无效属性.

如果您尝试以下样式,宽度将不会被动画,因为第一个规则将被第二个规则覆盖,由于无法识别"garbageProperty",因此实际上没有做任何事情.

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,我们需要的唯一规则是"转换:转换".

2)我还会注意到,只要我们有转换的浏览器前缀(<Chrome 26,<Firefox 16,<Safari 6.1,<Opera 12.1),那么转换肯定仍然是前缀(<Chrome 36,<Firefox 16 ,所有Safari,<Opera 23),这意味着我们可以在前缀规则之后省去未加前缀的转换版本.

3)由于Firefox在没有前缀的转换的同时发布了无前缀的转换,因此我们不需要在未加前缀的"转换"的右侧使用前缀"-moz-transform".

4)除了-o-之外,Opera在某些时候使用-webkit-前缀进行转换,但是在版本12中开始使用无前缀转换后,它们在版本15中开始使用-webkit-transform,因此我们不需要包含 - 转换后的-webkit-transform.此外,由于Opera在版本12.1之后仅使用无前缀或-webkit-transform,因此我们不需要在无前缀转换后包含-o-transform.

5)在这种情况下,我们不必将-webkit-transform包含在无前缀转换的右侧,因为只识别-webkit-tranform的浏览器将回退到-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;