CSS3高度過渡不工作

我使用CSS3過渡有一個問題，我怎樣才能使平滑過渡似乎瞬間
我想在div盒子慢慢改變其高度時，我在它懸停CSS3高度過渡不工作

的HTML代碼

<div id="imgs"> 

<img src="http://chat.ecobytes.net/img/emoticons/smile.png" alt=":)" title=":)" /> 
<img src="http://chat.ecobytes.net/img/emoticons/sad.png" alt=":(" title=":(" /> 
<img src="http://chat.ecobytes.net/img/emoticons/wink.png" alt=";)" title=";)" /> 
<img src="http://chat.ecobytes.net/img/emoticons/razz.png" alt=":P" title=":P" /> 
<img src="http://chat.ecobytes.net/img/emoticons/grin.png" alt=":D" title=":D" /> 
<img src="http://chat.ecobytes.net/img/emoticons/plain.png" alt=":|" title=":|" /> 
<img src="http://chat.ecobytes.net/img/emoticons/surprise.png" alt=":O" title=":O" /> 
<img src="http://chat.ecobytes.net/img/emoticons/confused.png" alt=":?" title=":?" /> 
<img src="http://chat.ecobytes.net/img/emoticons/glasses.png" alt="8)" title="8)" /> 
<img src="http://chat.ecobytes.net/img/emoticons/eek.png" alt="8o" title="8o" /> 
<img src="http://chat.ecobytes.net/img/emoticons/cool.png" alt="B)" title="B)" /> 
<img src="http://chat.ecobytes.net/img/emoticons/smile-big.png" alt=":-)" title=":-)" /> 

</div>

jsfiddle

來源

2011-05-22 SRN

http://robertnyman.com/2010/04/27/using-css3-transitions-to-create-rich-effects/ – Jawad 2011-05-22 17:32:17

這是可以做到的開啓/關閉效果與可變高度元素和CSS轉換一點JS - 看到這裏：http://stackoverflow.com/a/18636883/93812 – 2013-09-05 13:01:48

我相信你需要設置一個特定的高度，而不是自動的。 http://jsfiddle.net/BN4Ny/這是一個平滑的擴展。不知道你是否想要這個小小的開放效果。我剛分叉你的jsfiddle並添加了一個指定的高度。

來源

2011-05-22 17:31:56 robx

會有一個問題*如果*元素（表情）的數量是動態的，因爲高度將不得不更新。 – JCOC611 2011-05-22 17:35:20

是的，我會指定正確的高度，謝謝它的作品:) – SRN 2011-05-22 17:36:29

是否有可能使用css3關閉打開效果只有 – SRN 2011-05-22 17:37:26

這裏是你如何能做到這一點：http://jsfiddle.net/minitech/hTzt4/

要保持靈活的高度，JavaScript是一種必然，很遺憾。

來源

2011-05-22 17:46:38 Ryan

謝謝我將使用它在舊版瀏覽器也可以 – SRN 2011-05-22 17:50:26

而不是使用容器上的設置高度或使用JS（這是兩個尷尬的解決方案）...您可以將圖像放在列表項中，並在李上進行過渡。

如果所有圖像的高度相似，則表示容器內的內容仍可以是動態的。例如...

/* 
CLOSED 
*/ 

div.container li 

{ height:0px; 

-webkit-transition: all 0.5s ease; 
-moz-transition: all 0.5s ease; 
-ms-transition: all 0.5s ease; 
-o-transition: all 0.5s ease; 
transition: all 0.5s ease;} 

/* 
OPEN 
*/ 

div.container:hover li 

{ height:30px; 

-webkit-transition: all 0.5s ease; 
-moz-transition: all 0.5s ease; 
-ms-transition: all 0.5s ease; 
-o-transition: all 0.5s ease; 
transition: all 0.5s ease;}

來源

2013-08-26 19:40:54 user2719233

CSS3高度過渡不工作

回答

相關問題