因为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;
}
.collapsible.expanded {
max-height: 500px; / 要大于内容实际高度 /
}
这种方法简单有效，但缺点是如果 max-height 设置过大，动画时间会变长，即使内容很短。
使用 height + JS 获取真实高度
更精确的做法是结合 JavaScript 动态设置目标高度：
- 先设置元素可见但不可见（如
position: absolute; visibility: hidden） - 测量其
scrollHeight - 再应用该值到
height并触发动画
立即学习“前端免费学习笔记（深入）”；
const content = document.querySelector('.content');
const height = content.scrollHeight + 'px';
// 展开
content.style.height = height;
// 折叠
content.style.height = '0';
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 无法动画，必须转换为具体数值。
