css3高度过渡不起作用

Question

我有一个问题使用css3过渡如何使过渡平滑它立即出现
我希望div盒慢慢改变其高度当我将鼠标悬停在它上面

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

Answer 1

我相信你需要设置一个指定的高度而不是auto.http://jsfiddle.net/BN4Ny/这可以顺利扩展.不知道你是否想要那个小小的开放效果.我只是分叉你的jsfiddle并添加了一个指定的高度.

Answer 2

此解决方案不需要javascript或手动操作之前需要使容器具有固定高度的问题。

通过使用max-heightproperty并将其值设置为较高的值，可以做到这一点。

#imgs {
    border:1px solid #000;
    border-radius:3px;
    max-height:20px;
    width:100%;
    overflow:hidden;
    transition: 2s ease;
}
#imgs:hover {
    max-height:15em;
}

<div id="imgs">

  <img src="https://sslb.ulximg.com/image/405x405/artist/1346353449_4159240d68a922ee4ecdfd8e85d179c6.jpg/e96a72d63f272127d0b6d70c76fd3f61/1346353449_eminem.jpg" />
</div>