1. 犀牛前端部落首页
  2. CSS百科

CSS3:如何实现height:0和height:auto的动画效果?

在transition中使用max-height,而不是height。并将max-height的值设置为大于容器的值。

参考链接: JSFiddle demo

代码如下:

#menu #list {
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
    background: #d5d5d5;
}

#menu:hover #list {
    max-height: 500px;
    transition: max-height 0.25s ease-in;
}
<div id="menu">
    <a>hover me</a>
    <ul id="list">
        <!-- Create a bunch, or not a bunch, of li's to see the timing. -->
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/658.html

发表评论

登录后才能评论