height为auto时候，如何用c3实现动画

最新推荐文章于 2025-01-02 15:44:05 发布

flora8113

最新推荐文章于 2025-01-02 15:44:05 发布

阅读量1.7k

点赞数

分类专栏： css 文章标签： css3

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何利用CSS3中的max-height属性配合overflow:hidden实现高度变化的过渡动画效果，解决了高度为auto时无法使用transition:height的问题。

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

解决方法：使用max-height

css3 transition动画的一些限制，比如说一个高度为auto的div，是不能够使用transition: height来生成平滑的伸展效果的，按照css3的说法，只有固定长度，百分比长度，才能使用插帧什么的手段实现，总觉得这个说法有点儿牵强，浏览器难道不知道正常情况下的高度吗？

我遇到了这个问题，又不想动用js，只好剑走偏锋，想想主意了。

用js获得高度，暂不考虑；
用transform实现；
用max-height实现；

用transform实现是个很精巧的主意，

我们知道transform中有scale的属性，可以变换一个元素的尺寸，所以将scale（或者直接scaleY，如果你只想改高度的话）变换应用到transition中，就能实现视觉上的高度变化啦~ 主意我使用了“视觉上”这三个字，因为你直接一试就明白了，transform和relative的布局是一样的，不管你怎么变，你原来占据的空间是一直在那儿的。所以很多时候这个用法并不怎么适用，另外还要记住transform变换的原点，免得中心缩放了。

这里写图片描述

所以，使用max-height吧。

你会惊喜的发现max-height同样可以在transition中使用，配合overflow:hidden，给一个足够大的max-height，就能比较完美的模拟出height变化的效果了。
当然，既然是“模拟”，总有些与正版的差距。
稍微考虑下就能想到，如果我们真实的高度比max-height小，那max-height动画展示的时候，直到max-height与真实高度一致为止，你是看不到动画效果的。
所以…… 你懂的，收起来的时候感觉动画卡顿了一下，展开的时候倒还好~

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        *{
            margin: 0;
            padding:0;
        }
        div{
            overflow: hidden;
            background-color: orange;
            animation: slide 1s forwards;
        }
        @keyframes slide {
            0%{
                max-height:0px;
            }
            100% {
                max-height:300px;
            }
        }
    </style>
</head>
<body>
<div>
    <p>我不是height，是max-height</p>
    <p>我不是height，是max-height</p>
    <p>我不是height，是max-height</p>
    <p>我不是height，是max-height</p>
    <p>我不是height，是max-height</p>
    <p>我不是height，是max-height</p>
</div>
</body>
</html>