我有一个问题使用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>
5条答案
按热度按时间pb3skfrl1#
我相信你需要设置一个指定的高度而不是auto.http://jsfiddle.net/BN4Ny/这样做是一个平滑的扩展。虽然不确定你是否想要那个小的关闭打开效果。我只是把你的jsfiddle分叉并添加了一个指定的高度。
v8wbuo2f2#
这种解决方案不需要JavaScript,也不存在事先需要为容器设置固定高度的问题。
这可以通过使用
max-height
属性并将其值设置为较高的值来实现。kninwzqo3#
不要在容器上使用设置高度或使用JS(这两种解决方案都很笨拙)...您可以将图像放在列表项中,然后在li上进行转换。
如果所有的图片都有相似的高度,这意味着容器中的内容仍然是动态的。
hec6srdp4#
下面是您可以如何做到这一点:http://jsfiddle.net/minitech/hTzt4/
不幸的是,为了保持灵活的高度,JavaScript是必需的。
5t7ly7z55#
我用的是这个方法使用最大高度来过渡高度,而不是直接使用高度...例如: