CSS3：如何实现height:0和height:自动动画效果？

terry 2年前 (2023-09-07) 阅读数 235 #CSS

文章标签 CSS3 代码小记

使用 max-height 代替 height 进行过渡。并将max-height的值设置为大于容器的值。

参考链接：JSFiddle 演示

代码是：

#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>