CSS实现高度折叠展开动画效果

前往漫画官网入口并下载

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《CSS动画实现高度折叠展开效果》，介绍一下，希望对大家的知识积累有所帮助，助力实战开发！

因为height: auto无法参与动画，浏览器需明确数值进行过渡。推荐使用max-height或JS获取scrollHeight实现流畅折叠展开效果。

在CSS中实现元素的折叠与展开动画，直接使用 animation 控制 height 看似简单，但实际操作中容易遇到问题。因为 height: auto 无法参与CSS动画过渡（transition 或 animation），导致无法平滑展开或收起内容。

为什么 height: auto 不支持动画？

CSS 动画需要明确的数值起点和终点。当高度从 0 到 auto 时，auto 是一个动态计算值，浏览器无法知道目标高度是多少，因此不能生成中间帧。

使用 max-height 模拟展开/折叠

一种常见解决方案是用 max-height 替代 height：

• 初始状态：设置 max-height: 0、overflow: hidden
• 展开状态：设置一个足够大的 max-height（如 500px）
• 配合 transition 实现平滑动画

.collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
<p>.collapsible.expanded {
max-height: 500px; /<em> 要大于内容实际高度 </em>/
}</p>

这种方法简单有效，但缺点是如果 max-height 设置过大，动画时间会变长，即使内容很短。

使用 height + JS 获取真实高度

更精确的做法是结合 JavaScript 动态设置目标高度：

• 先设置元素可见但不可见（如 position: absolute; visibility: hidden）
• 测量其 scrollHeight
• 再应用该值到 height 并触发动画

const content = document.querySelector('.content');
const height = content.scrollHeight + 'px';
<p>// 展开
content.style.height = height;</p><p>// 折叠
content.style.height = '0';</p>

CSS 配合：

.content {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}

使用 CSS @keyframes 动画的限制

若使用 @keyframes 实现 height 动画，仍需具体数值。例如：

@keyframes slideDown {
  from { height: 0; }
  to { height: 200px; } /* 必须是固定值 */
}

这意味着它只适用于已知高度的内容，通用性差。

基本上就这些。想要流畅的折叠展开效果，推荐使用 max-height 方案快速实现，或结合 JS 动态读取高度实现更精准控制。关键点是理解 auto 无法动画，必须转换为具体数值。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~