height: auto 无法过渡因无具体数值，浏览器无法插值；需用 JS 获取 scrollHeight 后设固定高度，并配合 height: 0、强制重排、requestAnimationFrame 实现平滑动画。
transition 对 height: auto 为什么直接失效
因为 auto 不是数值，浏览器无法插值。transition 要求起始值和结束值都是可计算的像素值（如 120px、2.5rem），而 height: auto 是布局后才确定的动态结果，没有固定数字，也就没有“中间帧”可生成。
常见错误写法：height: auto; → height: 300px;，看起来写了 transition，但第一帧就是跳变。
用 JS 获取 scrollHeight 后设 height 过渡的实操要点
核心思路：把“未知高度”变成“已知像素值”，再触发 transition。关键不在获取，而在**时机与渲染节奏**。
- 必须在元素可见且已渲染内容后调用
scrollHeight（比如 DOMContentLoaded 后、或数据渲染完成后的微任务里） - 初始状态要显式设为
height: 0+overflow: hidden，不能留空或height: auto - 设置
height: 0后，需强制浏览器重排（例如读取offsetHeight），否则后续height: Xpx可能被合并渲染，动画丢失 - 推荐用
requestAnimationFrame包裹最终 height 赋值，确保它发生在下一帧，形成“0 → 目标值”的完整过渡链
简短示例：
const el = document.querySelector('.collapsible');
el.style.height = '0';
el.style.overflow = 'hidden';
// 强制重排
void el.offsetHeight;
requestAnimationFrame(() => {
el.style.height = `${el.scrollHeight}px`;
});
max-height 替代方案 vs JS 方案的取舍
用 max-height 看似简单，但实际有隐藏成本：
-
max-height: 0 → max-height: 500px的动画时长取决于差值，内容只高 60px 也会按 500px 差值匀速过渡，导致“慢吞吞展开” - 设
max-height: 100vh虽保险，但若内容很短，动画会明显延迟收尾 - JS 方案动画精准，但需处理异步加载、高度变化（如字体加载后重排）、多次 toggle 时的清理逻辑
- 如果内容高度基本稳定（如固定列表项），优先用 JS 一次性测高；如果高度频繁变动或含图片/字体加载，建议加防抖 + 重测机制
容易被忽略的 display 和 visibility 配合问题
即使 height 过渡生效，若同时用了 display: none 切换，动画仍会消失——因为 display 切换会立即移除盒模型，transition 根本没机会执行。
正确配合方式：
- 初始：
visibility: hidden; height: 0; overflow: hidden; - 展开中：移除
visibility: hidden（保持元素占位），再设目标height - 收起时：先设
height: 0，等 transitionend 后再加visibility: hidden（避免视觉残留）
注意：不要依赖 display 控制显隐，它和 transition 天然互斥。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
