直接对height使用transition无法实现流畅折叠动画，因CSS不支持height: auto到具体值的过渡。常用max-height配合overflow:hidden模拟动画，但设置过大数值会导致动画拖沓。推荐方案一：合理设定max-height上限值（如240px），结合transition控制动画时长0.3s~0.5s，适用于简单场景。更优方案二：通过JavaScript动态读取元素scrollHeight，再设置height的具体值并添加transition，实现基于真实高度的平滑展开收起效果。关键步骤包括初始height:0、overflow:hidden，展开时el.style.height=scrollHeight+'px'，收起时还原为0。配合requestAnimationFrame减少重绘，避免布局抖动，可选will-change或transform开启硬件加速提升性能。最终建议优先采用JS动态控制height的方式，确保动画自然流畅，而max-height方案适用于对精度要求不高的场合。
在使用 CSS 实现元素高度的折叠与展开动画时，直接对 height 使用 transition 往往无法达到流畅效果，尤其当内容高度不确定时。很多人尝试用 max-height 搭配 transition 来模拟动画，但容易出现“先撑开再收缩”或“动画卡顿”的问题。以下是优化方案，让折叠展开更自然流畅。
问题原因：height 不能从 auto 过渡到具体值
CSS 的 transition 不支持在 height: auto 和具体像素值（如 height: 100px）之间做平滑过渡。浏览器无法计算中间状态，导致动画失效或瞬间跳变。
而使用 max-height（例如从 0 到 500px）虽然能触发 transition，但如果设置过大（如 max-height: 9999px），动画会显得拖沓，因为浏览器仍会尝试“走过场”。
解决方案一：使用 max-height 合理取值 + overflow 控制
建议设置一个贴近实际内容的 max-height 上限值，避免过度夸张的数值。- 分析内容最大可能高度，比如菜单最多展示 6 行，每行 40px，则 max-height 设为 240px 左右即可。
- 结合 overflow: hidden 防止内容溢出。
- transition 作用于 max-height，持续时间控制在 0.3s~0.5s 更符合用户感知。
解决方案二：JavaScript 动态读取真实高度 + 设置 height + transition
这是实现真正流畅动画的关键方法——让 height 从 0 过渡到实际 scrollHeight。- 初始状态：height: 0; overflow: hidden;
- 展开时，先通过 JS 获取元素 clientHeight 或 scrollHeight，然后动态设置目标 height 值。
- 添加 transition: height 0.3s ease。
- 收起时再设回 height: 0。
示例代码：
立即学习“前端免费学习笔记（深入）”；
const el = document.querySelector('.content');
const height = el.scrollHeight + 'px';
// 展开
el.style.height = height;
// 收起
el.style.height = '0';
配合 CSS：
.content {
height: 0;
overflow: hidden;
transition: height 0.3s ease;
}
这样动画基于真实内容高度，不会有“空跑”，视觉上非常顺滑。
附加技巧：避免布局抖动和重绘
- 确保容器不依赖外部流影响高度，必要时用 padding 替代 margin。
- 动画期间避免频繁操作 DOM，可使用 requestAnimationFrame 批量处理。
- 开启硬件加速（谨慎使用）：
transform: translateZ(0)或will-change: height可提升性能，但别滥用。
基本上就这些。用 JS 控制真实 height 是最推荐的做法，max-height 方案适合简单场景或对精度要求不高的情况。关键在于避免“猜高度”，才能让动画看起来自然。
