相关疑难解决方法(0)

根据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？

在IE10或11中查看此JSBin.

如果检查#test元素,您将看到它将转换属性显示为-webkit-transform(并且不会发生转换).如果您注释掉transition: -webkit-transform;声明,如在这里,然后过渡工作.

为什么IE没有将供应商前缀值作为无效的属性值丢弃？顺便说一句,如果我在Chrome上做类似的事情 - 比如说,-ms-transition在-webkit-transition它之后- 它会丢弃它,并且只使用-webkit-transition声明.似乎仅在IE上这是一个问题.

我有下面的Sass片段就像一个魅力,但我想知道我是否需要为我的变换属性添加前缀,如果是,如何？(如果没有,为什么不呢？)

@mixin expand-o-band() {
    0%   { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(2); }
}

@-webkit-keyframes expand-o-band { @include expand-o-band(); }
@-moz-keyframes expand-o-band { @include expand-o-band(); }
@-o-keyframes expand-o-band { @include expand-o-band(); }
@keyframes expand-o-band { @include expand-o-band(); }


.circle-thing {
    -webkit-animation: expand-o-band 1.5s infinite; /* Safari 4+ */
    -moz-animation:    expand-o-band 1.5s infinite; /* Fx 5+ */
    -o-animation:      expand-o-band 1.5s infinite; /* Opera 12+ */
    animation:         expand-o-band 1.5s infinite; /* IE 10+, Fx 29+ */
} …