特定于浏览器的前缀以及转换时的CSS过渡 [英] Browser-specific prefixes with a CSS transition on transform

问题描述

根据caniuse.com，对于同时支持CSS 过渡和CSS transform 的那些浏览器，至少三种不同的类型：

According to caniuse.com, for those browsers that support both CSS transition and CSS transform, combinatorically there are at least three different types:

1. 需要在 -webkit-前缀上使用的类型转换和转换（例如Safari 6，Android浏览器<4.4）。


2. 那些只需要在 transform 上使用 -webkit-前缀的人（例如Chrome 3x）。


3. 不需要前缀的内容（例如FF和IE10 / 11）。

1. Those that require the -webkit- prefix on both transition and transform (e.g. Safari 6, Android browser < 4.4).
2. Those that only require the -webkit- prefix on transform (e.g. Chrome 3x).
3. Those that require prefixes on neither (e.g. FF and IE10/11).

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

How can I safely write my transition styles so that they are parsed correctly in each type? I see two options:

-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浏览器将无法解析第二行，因为它们将始终包含无法识别的属性。问题是，浏览器如何处理过渡内的无效属性-忽略整个过渡样式或仅跳过无效的属性？

Now because of type 2 and type 3 browsers I need to have a prefix-less transition for both -webkit-transform and transform. The problem with the first option is I worry that type 2 and type 3 browsers will not be able to parse the second line, since they will always contain an unrecognized property. The question is, how do browsers handle invalid properties inside a transition--ignore the entire transition style or just skip the invalid property?

我认为可以将其分为两个属性来缓解，如果一个属性不可解析，它将被忽略。除了第二个选项有些冗长之外，我仍然想知道，对于2型浏览器，第三个过渡是否将不可解析并重置 转换返回空值。

I thought this may be mitigated by separating it into two properties so that if one is not parseable it will just be ignored. Apart from this second option being a bit verbose, I still wonder if, in the case of type 2 browsers, the third transition will be unparseable and "reset" the transition back to null.

任何想法通常如何执行？另外，当Chrome 等从 -webkit-transform 切换到无前缀的 transform ？

Any ideas how these perform, generally? Also, which of these are future-compliant for when Chrome et al. switch from -webkit-transform to the prefix-less transform?

推荐答案

更新通知不幸的是，事实证明Safari在撰写本文时，它不遵循下面的W3规范中概述的显式标准，并且在过渡后同时包含webkit前缀属性和无前缀属性将导致其中断并且完全没有动画效果。我仍在探索这个问题，以寻求一个好的通用解决方案，但是直到Safari解决此问题之前，似乎没有一种方法可以在所有地方使用，并且对于将来的所有属性，都无法通过JavaScript动态调整每个浏览器的CSS规则。

UPDATE NOTICE Unfortunately it turns out Safari at the time of this post does not follow the explicit standard outlined in the W3 Specification below, and including both a webkit prefixed property and a prefix-less property after transition will cause it to break and not be animated at all. I am still exploring this issue for a good general solution but it looks like until Safari fixes this, there may not be one that works everywhere, and for all future properties, without adjusting your CSS rules per browser dynamically with JavaScript.

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

If you add an unrecognized or invalid property to a list of transition properties, the valid properties in the list will still be added (except on Safari, see notice above).

根据w3 CSS过渡规范的第2.1节：

According to section 2.1 of the w3 Specification for CSS Transitions:

如果列出的标识符之一不是公认的属性名称或不是可设置动画的属性，则实现必须仍使用持续时间，延迟在列表中的可设置动画的属性上开始转换，以及在 transition-duration， transition-delay和 transition-timing-function列表中各自索引处的计时功能。

If one of the identifiers listed is not a recognized property name or is not an animatable property, the implementation must still start transitions on the animatable properties in the list using the duration, delay, and timing function at their respective indices in the lists for ‘transition-duration’, ‘transition-delay’, and ‘transition-timing-function’.

< a href = http://www.w3.org/TR/css3-transitions/ rel = noreferrer> W3 CSS过渡规范

如果采用以下样式，则宽度属性将在之前无效且无法识别的属性下仍然保持动画状态。

If you take the following style, the width property will still be animated despite being preceded by an invalid and unrecognized property.

transition: garbageProperty 2s, width 2s;

---

如果您遵循转换规则和另一个转换规则（具有相同前缀或没有前缀），即使第二条规则的右侧仅列出无效的属性，第一条规则也将被覆盖，并且不再应用。

如果尝试以下样式，则宽度将不会显示动画，因为第一条规则将被第二条规则覆盖，这实际上不会做任何事情，因为无法识别 garbageProperty。

If you try the following style the width will not be animated because the first rule will be overwritten by the second rule, which effectively does nothing since "garbageProperty" is not recognized.

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

---

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

---

Based on this I believe your first approach is correct.

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

仅当识别到-webkit-transition时才应用第一个规则，在这种情况下，因为进行了转换过渡之后，它肯定必须加上前缀，并且我们可以省略无前缀的transform属性（尽管我认为离开它不会有任何伤害）。仅当识别出无前缀的过渡时才应用第二个规则，在这种情况下，即使列表中的其他属性未被识别，也将应用浏览器识别的右侧属性中的任何一个。

The first rule will only be applied if -webkit-transition is recognized, in which case since transform came out after transition it will definitely have to be prefixed and we can omit the unprefixed transform property (although I don't think it would hurt to leave it). The second rule will only be applied if unprefixed transition is recognized, in which case whichever of the right-hand side properties that are recognized by the browser will be applied, even if other properties in the list are not recognized.

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

Your second approach is flawed since the second rule will always be overwritten by the third rule regardless of if any properties on the right hand side are or are not recognized.

我相信以下是浏览器前缀属性的完整列表，以确保您对所有有能力的浏览器应用2s转换来进行转换，但是请阅读以下基本知识，因为它恰好是

I believe the complete list of browser prefixed properties to guarantee that you apply transition of 2s to transform on all browsers that are capable is the following, but please read the rational below because it only happens to be this neat for this property pair by chance:

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

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

1) Note there is no such thing as -ms-transition, but there is a -ms-transform. That being said transition was not added to IE until 10 where -ms-transform was also outdated by unprefixed transform. Hence for IE the only rule we need is "transition: transform".

2）我还要注意，每当我们有一个用于转换的浏览器前缀（< Chrome 26，< Firefox 16，< Safari 6.1，< Opera 12.1），然后绝对还必须加上转换前缀（< Chrome 36，< Firefox 16，所有Safari，< Opera 23），这意味着我们可以离开

2) I will additionally note that any time we have a browser prefix for transition (< Chrome 26, < Firefox 16, < Safari 6.1, < Opera 12.1), then transform was definitely still prefixed as well (< Chrome 36, < Firefox 16, all Safari, < Opera 23), meaning we can leave off the unprefixed version of transform following a prefixed rule.

3）由于Firefox在发布其未前缀转换的同时发布了未前缀转换，因此我们不需要前缀-

3) Since Firefox released unprefixed transition at the same time as their unprefixed transform, we do not need the prefixed "-moz-transform" on the right-hand side of the unprefixed "transition".

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

4) Opera at some point used -webkit- prefix for transform in addition to -o-, however they started using -webkit-transform in version 15, after starting to use prefixless transition in version 12.1, so we do not need to include the -webkit-transform after -o-transition. Also since Opera only used prefixless or -webkit-transform after version 12.1, we do not need to include -o-transform after the prefixless transition.

5）在这种情况下我们不必在无前缀转换的右边添加-webkit-transform，因为仅识别-webkit-transform的浏览器将退回到-webkit-transition并仍然应用此属性。

5) In this case we do not have to include -webkit-transform to the right of prefix-less transition because browsers that only recognize -webkit-tranform will fall back to -webkit-transition and still apply this property.

但是，如果您不介意CSS的长度，则以下方法应该是一种安全的通用解决方案，用于确保适当的浏览器前缀转换和前缀右手属性。 更新通知事实证明，这种方法在Safari上可能并不安全，因为如果存在带前缀的属性和不带前缀的属性，则它们不会遵循W3标准忽略忽略转换右边的无法识别的属性。

If you don't mind the length of your CSS though, the following should be a safe generalized solution for ensuring proper browser prefixing of transition and a prefixed right hand property. UPDATE NOTICE As it turns out this approach may not be safe on Safari since they do not follow the W3 standard on ignoring unrecognized properties to the right of transition if there is one that is prefixed and one that is not.

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

这篇关于特定于浏览器的前缀以及转换时的CSS过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！