具有多個屬性的CSS過渡速記？

310

我似乎無法找到具有多個屬性的CSS轉換速記的正確語法。這不會做任何事情：具有多個屬性的CSS過渡速記？

.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中進行測試。

我在做什麼錯？

編輯：只是要清楚，我正在尋找速記版縮放我的CSS。它充滿了所有供應商前綴。還擴展了示例代碼。

來源

2012-03-12 Gregory Bolkenstijn

你真的改變高度和透明度的值是多少？否則它們不會更改 – HerrSerker 2012-03-12 15:42:43

請查閱此文檔。 https://developer.mozilla.org/en/CSS/CSS_transitions – websymphony 2012-03-12 15:41:42

我不太熟悉CSS轉換 - 是不透明度後的雙「.5s」值？ – BoltClock 2012-03-12 15:52:34

493

語法：

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

注意持續時間必須出現在延遲之前，如果指定了後者。

個人相結合的轉變速記聲明：

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

或者只是過渡它們都：

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

這裏是a straightforward example。這是另一個with the delay property。

編輯：以前這裏列出了在兼容性和關於transition已知問題。爲了便於閱讀，刪除。

底線：只是使用它。此屬性的性質對於所有應用程序而言都不會突破，兼容性現在已經遠高於全球94％。

如果你還希望確保，請參閱http://caniuse.com/css-transitions

來源

2012-03-12 15:51:30

你有沒有試過這個？它不適合我。我也無法使用全部屬性，因爲我對第二個屬性有延遲。 – 2012-03-12 16:08:29

它適用於Chrome 17，Firefox 10，Safari 5.目前還沒有辦法嘗試IE瀏覽器:(這裏是jsfiddle：http://jsfiddle.net/remibreton/qAxnK/ – 2012-03-12 17:05:34

我已經更新了jsfiddle以使用延遲：http://jsfiddle.net/remibreton/qAxnK/1/ – 2012-03-12 19:07:05

258

如果您有想要以同樣的方式過渡（因爲你也有一些屬性您特別不要在若干個特定屬性過渡，說opacity），另一種選擇是做這樣的事情（前綴不再贅述）：

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

第二個聲明將覆蓋all在它上面的速記聲明，並就（偶爾）以上的C oncise代碼。

Demo

來源

2013-06-14 22:09:18 Jason

這很有用！不僅僅是因爲「transition-property」覆蓋，而且還因爲例如'transition-delay'需要在簡寫後指定（至少在webkit中）。換句話說，簡寫意味着一個「過渡延遲」爲0，並在速記將其設置爲0之前放置一個獨立延遲。 – duncanwilcox 2013-07-21 15:37:08

@duncanwilcox你可以做'transition：[props] [duration] [easing] [delay]'在每個現代瀏覽器中 – Jason 2013-10-24 16:51:13

更喜歡這個答案比接受的答案要多得多。 – Erutan409 2017-07-26 14:55:52

通過具有上轉換的不透明度屬性，5S延遲，該元件將是完全透明的（並因此不可見的）的全部時間其高度轉變。所以你唯一會看到的是不透明度的變化。因此，您將獲得與將高度屬性留出過渡相同的效果：

「transition：opacity .5s .5s;」

這就是你想要的嗎？如果沒有，並且您希望看到高度過渡，那麼您在轉換過程中不會出現零不透明度。

來源

2015-04-03 22:13:36

這也不起作用，因爲在不透明度轉換期間高度將保持爲0。 – Xesau 2015-08-06 12:19:59

-3

我覺得這個是工作：

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

來源

2015-09-05 16:28:27

具有多個屬性的CSS過渡速記？

回答

相關問題