您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

您可以使用CSS3从height:0过渡到可变的内容高度吗?

您可以使用CSS3从height:0过渡到可变的内容高度吗?

max-height在过渡中使用,而不是height。并设置一个max-height比您的盒子所能获得的更大的价值。

#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>
CSS 2022/1/1 18:21:02 有748人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶