仅仅使用 CSS 做个下拉菜单的动画

最新推荐文章于 2024-07-17 13:07:23 发布

亮子AI

最新推荐文章于 2024-07-17 13:07:23 发布

阅读量6.4k

点赞数

分类专栏： css 文章标签： css 下拉动画

本文链接：https://blog.youkuaiyun.com/henryhu712/article/details/82967003

版权

css 专栏收录该内容

31 篇文章

订阅专栏

关键是使用 max-height, 只要设置的值大于要显示的元素的高就可以：

HTML

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

CSS

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

https://stackoverflow.com/a/8331169