CSS過渡速記有多個屬性？

本文翻譯自：CSS transition shorthand with multiple properties?

I can't seem to find the correct syntax for the CSS transition shorthand with multiple properties. 我似乎找不到具有多個屬性的CSS轉換速記的正確語法。 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;
}

I add the show class with javascript. 我用javascript添加show類。 The element becomes higher and visible, it just doesn't transition. 元素變得更高且可見，它不會過渡。 Testing in latest Chrome, FF and Safari. 在最新的Chrome，FF和Safari中進行測試。

What am I doing wrong? 我究竟做錯了什麼？

EDIT: Just to be clear, I'm looking for the shorthand version to scale my CSS down. 編輯：爲了清楚，我正在尋找速記版本來縮小我的CSS。 It's bloated enough with all the vendor prefixes. 所有供應商前綴都足夠臃腫。 Also expanded the example code. 還擴展了示例代碼。

---

#1樓

參考：https://stackoom.com/question/eZcx/CSS過渡速記有多個屬性

---

#2樓

If you have several specific properties that you want to transition in the same way (because you also have some properties you specifically don't want to transition, say opacity ), another option is to do something like this (prefixes omitted for brevity): 如果您有想要以同樣的方式（因爲你也有一些屬性，你特別不希望轉型，說要變革的若干特定屬性opacity ），另一種選擇是做這樣的事情（略去了前綴）：

.myclass {
    transition: all 200ms ease;
    transition-property: box-shadow, height, width, background, font-size;
}

The second declaration overrides the all in the shorthand declaration above it and makes for (occasionally) more concise code. 第二個聲明覆蓋了它上面的簡寫聲明中的all ，並且（偶爾）使代碼更簡潔。

 /* prefixes omitted for brevity */ .box { height: 100px; width: 100px; background: red; box-shadow: red 0 0 5px 1px; transition: all 500ms ease; /*note: not transitioning width */ transition-property: height, background, box-shadow; } .box:hover { height: 50px; width: 50px; box-shadow: blue 0 0 10px 3px; background: blue; } 

 <p>Hover box for demo</p> <div class="box"></div> 

Demo 演示

---

#3樓

By having the .5s delay on transitioning the opacity property, the element will be completely transparent (and thus invisible) the whole time its height is transitioning. 通過在轉換不透明度屬性時延遲.5s，元素在其高度轉換的整個時間內將是完全透明的（因此是不可見的）。 So the only thing you will actually see is the opacity changing. 所以你唯一能看到的就是不透明度的變化。 So you will get the same effect as leaving the height property out of the transition : 因此，您將獲得與將高度屬性保留在轉換之外相同的效果：

"transition: opacity .5s .5s;" “過渡：不透明度.5s .5s;”

Is that what you're wanting? 那是你想要的嗎？ If not, and you're wanting to see the height transition, you can't have an opacity of zero during the whole time that it's transitioning. 如果沒有，並且您希望看到高度轉換，則在轉換的整個過程中不能具有零不透明度。

---

#4樓

I think that work with this : 我認爲這個工作：

element{
   transition: all .3s;
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -o-transition: all .3s;

---

#5樓

I that work with this : 我用這個：

element{
   transition : height 3s ease-out, width 5s ease-in;
}

---

#6樓

Syntax: 句法：

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

Or just transition them all: 或者只是將它們全部轉換：

-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

Here is a straightforward example . 這是一個簡單的例子 。 Here is another one with the delay property . 這是另一個具有延遲屬性的 。

---

Edit: previously listed here were the compatibilities and known issues regarding transition . 編輯：此前列出的是有關transition的兼容性和已知問題。 Removed for readability. 刪除以方便閱讀。

Bottom-line: just use it. 底線：只需使用它。 The nature of this property is non-breaking for all applications and compatibility is now well above 94% globally. 對於所有應用程序，此屬性的性質不會中斷，並且全球的兼容性現在遠高於94％。

If you still want to be sure, refer to http://caniuse.com/css-transitions 如果您仍想確定，請參閱http://caniuse.com/css-transitions