使用height与transition实现折叠展开动画时，需避免height: auto无法动画的问题。可通过JavaScript获取元素scrollHeight并设为具体像素值，实现动态内容的流畅过渡；或采用max-height模拟动画，设置足够大的值以覆盖内容高度，但可能影响动画自然度。关键细节包括：始终添加overflow: hidden防止溢出，避免使用display: none/block中断过渡，可结合opacity增强视觉效果，复杂场景可考虑transform: scaleY()或clip-path替代。理解height动画限制并根据内容是否固定选择策略是实现流畅折叠展开的核心。
在CSS中实现元素的折叠与展开动画，常通过 transition 与 height 属性结合完成。虽然这个方法看似简单，但如果不注意细节，容易导致动画不流畅或失效。
使用 height + transition 实现基本展开收起
最常见的做法是控制元素的 height 从 0 到具体值（如 auto）之间过渡。
示例：
.collapse {
height: 0;
overflow: hidden;
transition: height 0.3s ease;
}
.collapse.expanded {
height: 200px; / 必须指定具体数值 /
}
这里的关键是：transition 不能直接对 height: auto 做动画，因为 auto 是一个非可计算值，浏览器无法确定中间状态。所以必须设置一个固定高度。
立即学习“前端免费学习笔记（深入）”；
动态内容下 height: auto 的处理技巧
当内容不确定时（比如文本长度可变），无法提前设定像素高度。这时可以借助 JavaScript 测量元素真实高度。
思路如下：
- 先把元素 height 设为 auto，并临时显示在页面上（可隐藏但保留布局）
- 用 JS 获取 clientHeight
- 再将 height 设为该值，触发 transition
JavaScript 示例：
const el = document.querySelector('.collapse');
const height = el.scrollHeight + 'px';
el.style.height = height;
这样就能让 height 从 0 动画到实际需要的高度。
替代方案：使用 max-height 模拟动画
一种更简单的替代方式是使用 max-height：
.collapse {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.collapse.expanded {
max-height: 500px; / 设置足够大的值 /
}
优点是无需 JS 计算高度；缺点是如果 max-height 设置过大，动画时间可能不自然，且无法精确控制动画节奏。
注意事项与优化建议
为了确保动画顺滑，注意以下几点：
- 始终配合 overflow: hidden，防止内容溢出
- 避免使用 display: none/block，因为它会中断 transition（元素消失则无过渡）
- 可结合 opacity 配合使用，增强视觉效果
- 对于复杂结构，考虑使用 transform: scaleY() 或 clip-path 作为替代方案
基本上就这些。height 和 transition 联用做折叠动画虽有限制，但合理处理后依然实用。关键是理解 height: auto 不可动画的本质，并选择合适策略应对不同场景。
