【无标题】css实现高度动态过渡

一个专注写代码的程序媛

于 2022-07-29 20:21:07 发布

阅读量1k

点赞数

文章标签： css 前端 html

本文链接：https://blog.youkuaiyun.com/linanran1027/article/details/126063303

版权

当需要动态获取高度并实现过渡效果时，可以避免使用js，转而利用CSS的max-height属性。通过设置初始max-height为0，配合transition，实现元素从无到有的平滑展开。在`.down`状态下设置一个合适的max-height值，如1000px，以适应内容高度。注意，max-height值不应过大，以免引起动效延迟。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

`transition`不支持`height：auto`

一般情况下，我们给定高度是可以做到动效过渡的，但是有些情景不适合给定高度，需要动态获取高度。这时，可以选择用js动态获取高度，但是略显不太优雅。

巧用`max-height`适配动态高度

代码如下：

{
    max-height: 0;
    transition: max-height 0.3s linear;
 
    &.up {
        max-height: 0;
    }
    
    &.down {
        max-height: 1000px;
    }
}

注意，这里的最大高度不宜设置太大，如果设置太大，动效会有延迟，设置一个不会超出的最大高度即可。