解决height过渡无效的核心是让浏览器知道目标高度并平滑过渡：①max-height方案（兼容性好）；②transform scaleY方案（性能优但影响文档流）；③JS+scrollHeight方案（精确控制）；④@starting-style实验性方案（Chrome 115+）。
直接用 transition: height 是无效的，因为 CSS 无法对 height: auto 做过渡动画。布局跳动本质是高度突变引起的重排（reflow），解决核心在于“让浏览器知道目标高度，并平滑过渡”。
用 max-height 替代 height 过渡
这是最常用且兼容性好的方案：把 height 换成 max-height，并设置一个足够大的固定值（确保能容纳所有内容），再配合 overflow: hidden。
- 关闭状态：
max-height: 0; opacity: 0; overflow: hidden; - 展开状态：
max-height: 500px; opacity: 1;（500px 需大于内容实际高度） - 添加过渡：
transition: max-height 0.3s ease-out, opacity 0.2s ease-in;
注意：max-height 值不能太小（否则内容被截），也不宜过大（动画时间会拉长）。若内容高度差异大，可 JS 动态读取并设 max-height，但需注意避免 layout thrashing。
使用 transform + scaleY 模拟高度变化
利用 transform: scaleY() 触发 GPU 加速，性能更好，且无需预估高度。
立即学习“前端免费学习笔记（深入）”；
- 初始状态：
transform: scaleY(0); origin: top; opacity: 0; overflow: hidden; - 展开状态：
transform: scaleY(1); opacity: 1; - 过渡：
transition: transform 0.25s ease-in-out, opacity 0.2s ease-in;
优点是无需关心内容高度，缺点是元素仍占原始文档流空间（需配合 position: absolute 或 visibility: hidden 等微调），且 scaleY 会影响子元素缩放（可用 transform: scaleY(1) 在子元素上反向抵消）。
JS 配合 getComputedStyle 实现真 height 过渡
适用于需要精确控制、或必须保持文档流的场景。步骤如下：
- 先设
height: 0，强制折叠 - 触发重排（如读取
offsetHeight），再获取目标高度：const h = el.scrollHeight + 'px'; - 设置
height: h并添加transition - 动画结束后清理内联样式（可选）
关键点在于“强制重排”——读取一个布局相关属性（如 offsetHeight、clientHeight、getComputedStyle）会让浏览器立即计算当前渲染状态，从而拿到准确的 scrollHeight。
现代方案：CSS @starting-style + height transition（实验性）
Chrome 115+ 支持 @starting-style，允许为过渡起点定义样式，使 height: auto → height: [具体值] 成为可能：
details summary + div {
transition: height 0.3s;
@starting-style {
height: 0;
}
}
details[open] summary + div {
height: fit-content;
}
目前仅 Chromium 系支持，生产环境慎用，但代表未来方向。
基本上就这些。选哪种取决于兼容性要求、内容动态性、是否允许脱离文档流。日常开发中，max-height 方案最稳妥；追求性能且能接受轻微布局调整，优先试 scaleY；需要精准控制又不介意 JS，就用 scrollHeight 方案。
