具有多个属性的CSS转换速记？ [英] CSS transition shorthand with multiple properties?

问题描述

我似乎无法找到具有多个属性的CSS转换速记的正确语法。这不会做任何事情：

I can't seem to find the correct syntax for the CSS transition shorthand with multiple properties. This doesn't do anything:

.element {
  -webkit-transition: height .5s, opacity .5s .5s;
     -moz-transition: height .5s, opacity .5s .5s;
      -ms-transition: height .5s, opacity .5s .5s;
          transition: height .5s, opacity .5s .5s;
  height: 0;
  opacity: 0;
  overflow: 0;
}
.element.show {
  height: 200px;
  opacity: 1;
}

我用javascript添加show类。元素变得更高和可见，它只是不过渡。测试最新的Chrome，FF和Safari。

I add the show class with javascript. The element becomes higher and visible, it just doesn't transition. Testing in latest Chrome, FF and Safari.

我做错了什么？

编辑：清除，我正在寻找的缩写版本来缩放我的CSS。它足够膨胀与所有供应商前缀。

Just to be clear, I'm looking for the shorthand version to scale my CSS down. It's bloated enough with all the vendor prefixes. Also expanded the example code.

推荐答案

语法

速记语法：

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

请注意，如果指定了延迟，持续时间必须早于延迟。
个别转换合并在简写声明：

Note that the duration must come before the delay if the latter is specified. Individual transitions combined in shorthand declarations:

-webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-ms-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s; /* IE10 is actually unprefixed */
-o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;

或直接转换它们：

-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out; /* IE10 is actually unprefixed */
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

这里是一个简单的例子。这是另一个延迟属性。

全球支持：90.93％
（来自 http://caniuse.com/css-transitions 的数据）

Global support: 90.93% (data from http://caniuse.com/css-transitions)

未指定：

• Android浏览器4.4+


• Chrome 26 +


• Chrome for Android 31 +


• Firefox 16 +


• Android 23 +


• IE10 +


• IE Mobile 10 +


• Opera 12.1 +


• Opera Mobile 12.1 +


• Safari 7 +


• 移动Safari（iOS）7.1 +


• Blackberry Browser 10 +

• Android browser 4.4+
• Chrome 26+
• Chrome for Android 31+
• Firefox 16+
• Firefox for Android 23+
• IE10+
• IE Mobile 10+
• Opera 12.1+
• Opera Mobile 12.1+
• Safari 7+
• Mobile Safari (iOS) 7.1+
• Blackberry Browser 10+

-webkit - ：

• Android浏览器2.1至4.3


• Chrome最多25个


• Chrome for Android最多31个


• 移动Safari（iOS）3.2到6.1


• Safari 3.1到6


• Blackberry浏览器7到<10

• Android browser 2.1 to 4.3
• Chrome up to 25
• Chrome for Android up to 31
• Mobile Safari (iOS) 3.2 to 6.1
• Safari 3.1 to 6
• Blackberry Browser 7 to <10

-moz - prefixed（Gecko engine）

-moz- prefixed (Gecko engine)

• Firefox 4至15

-o - 前缀（Presto引擎）

-o- prefixed (Presto engine)

• Opera 10.5到12


• Opera Mobile 10到12

不支持

• IE到IE9


• Firefox最多3.6


• li>
  
• Opera Mini

1. 除了以下任何伪元素不支持：


2. 下面不支持具有calc（）派生值的可转移属性， =http://connect.microsoft.com/IE/feedback/details/762719/css3-calc-bug-inside-transition-or-transform =noreferrer>包括IE11


3. background-size在下面不支持，包括IE10


4. IE11不支持SVG上的CSS转换 fill property。


5. 在Chrome中（高达43.0），对于transition-delay属性，无论是显式指定还是在transition属性内写入，即使值为0， 。


6. IE10& IE11不支持转换 column-count 属性。

1. Not supported on any pseudo-elements besides ::before and ::after for Firefox, Chrome 26+, Opera 16+ and IE10+.
2. Transitionable properties with calc() derived values are not supported below and including IE11
3. 'background-size' is not supported below and including IE10
4. IE11 does not support CSS transitions on the SVG fill property.
5. In Chrome (up to 43.0), for transition-delay property, either explicitly specified or written within transition property, the unit cannot be ommitted even if the value is 0.
6. IE10 & IE11 are reported to not support transitioning the column-count property.

这篇关于具有多个属性的CSS转换速记？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！