Html css3高度过渡不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6089548/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css3 height transition not working
提问by SRN
i have a problem using css3 transitions
how can i make the transition smooth it appears instantly
i want the div box to slowly change its height when i hover over it
我在使用 css3 过渡时遇到问题如何使过渡平滑它立即出现
我希望 div 框在我悬停在它上面时慢慢改变它的高度
the html code
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>
回答by robx
I believe you need to set a specified height instead of auto. http://jsfiddle.net/BN4Ny/this does a smooth expansion. Not sure if you wanted that little close open effect though. I just forked your jsfiddle and added a specified height.
我相信您需要设置指定的高度而不是自动。http://jsfiddle.net/BN4Ny/这可以平滑扩展。不确定你是否想要那种小的关闭打开效果。我只是分叉了你的 jsfiddle 并添加了一个指定的高度。
回答by lordvcs
This solution does not need javascript or have the problem of needing to have a fixed height for the container before hand.
此解决方案不需要 javascript 或需要事先为容器设置固定高度的问题。
This is made possible by using max-heightproperty and setting its value to a high value.
这是通过使用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>回答by user2719233
Instead of using a set height on a container or using JS (which are both awkward solutions)... You can put the images in list items and work your transition on the li.
而不是在容器上使用设置高度或使用 JS（这都是尴尬的解决方案）......您可以将图像放在列表项中并在 li 上进行转换。
If all the images are going to a similar height it means your content inside the container can still be dynamic. For example...
如果所有图像的高度都相似，则意味着容器内的内容仍然可以是动态的。例如...
/*
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;}
回答by Ry-
Here's how you can do it: http://jsfiddle.net/minitech/hTzt4/
你可以这样做：http: //jsfiddle.net/minitech/hTzt4/
To keep a flexible height, JavaScript is a necessity, unfortunately.
不幸的是，为了保持灵活的高度，JavaScript 是必不可少的。
