如何將顯示切換效果轉換爲CSS 3轉換效果

首先，我必須說我在網站上工作，我只能操作它的CSS。 所以，請不要給我一個javascript/html解決方案。如何將顯示切換效果轉換爲CSS 3轉換效果

這裏是我的問題，

您可以在此看到jsFiddle demo，有一個基本的切換顯示方法，但它不會對默認的CSS過渡效果。 HTML完全是這樣的，我沒有權限改變它的HTML或JavaScript，我只能玩CSS。

我想將CSS 3 Transitions效果添加到此切換方法。

As Jim Jeffers's answer on this question，過渡效果絕不適用於

display: block < - >display: none

所以我總是需要保持元素顯示塊。

我試過，但沒有奏效，

.infocontent { 
    -webkit-transition: opacity 1s ease-out; 
} 
div[style='display: block; '].infocontent { 
    opacity: 1; height: auto !important; 
} 
div[style='display: none; '].infocontent { 
    display:block !important; opacity: 0; height: 0px; 
}

爲什麼不工作？我怎樣才能做到這一點？

來源

2012-05-20 ocanal

我遇到了同樣的問題，因爲我不能使用fx jQuery .hide（100）或.show（100）函數，因爲他們在我的網站上做出奇怪的間距（這是不可接受的）。如果我使用display：block;並顯示：無;但是間距不見了，但即時通訊缺乏你用jquery獲得的超酷過渡效果。 – ObedMarsh

嘗試在最大高度而不是高度上使用過渡。

來源

2012-05-20 23:02:09 Ana

我不認爲他正在嘗試轉換高度，只是不透明度。不過，我不確定這實際上應該如何表現。在這種情況下，高度似乎是自然而然的事情。 –

是的，在這種情況下，高度看起來像是自然而然的事情，但是你不能從高度轉換：auto; （這就是爲什麼我建議最大高度）。 – Ana

@Ana，不，它不工作，實際上我可以設置一個特定的高度，這不重要.http：//jsfiddle.net/tRTgE/2/ – ocanal

如何將顯示切換效果轉換爲CSS 3轉換效果

回答

相關問題