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>
(0)
上一篇 2019年3月1日 下午11:42
下一篇 2019年3月2日 下午10:33

相关推荐

发表回复

登录后才能评论