[英]css3 height transition not working
我在使用 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>
我相信您需要设置指定的高度而不是自动。 http://jsfiddle.net/BN4Ny/这可以平滑扩展。 不确定你是否想要那种小的关闭打开效果。 我只是分叉了你的 jsfiddle 并添加了一个指定的高度。
此解决方案不需要 javascript 或需要事先为容器设置固定高度的问题。
这是通过使用max-height
属性并将其值设置为高值来实现的。
#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>
而不是在容器上使用设置高度或使用 JS(这都是尴尬的解决方案)......您可以将图像放在列表项中并在 li 上进行转换。
如果所有图像的高度都相似,则意味着容器内的内容仍然可以是动态的。 例如...
/*
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;}
你可以这样做: http : //jsfiddle.net/minitech/hTzt4/
不幸的是,为了保持灵活的高度,JavaScript 是必不可少的。
好吧,我正在使用这种方法:使用最大高度来过渡高度而不是直接使用高度......例如:
div {
height: auto;
max-height:0;
}
.toggle-above-div:hover div {
max-height:0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.