直接写 height: 0 → height: auto 无动画，因 auto 非数值，浏览器无法插值；常用解法是用 max-height 代替（需设合理上限），或用 js 测量 scrollheight 后动态设置内联 height 再切回 auto。
为什么直接写 height: 0 → height: auto 不会动动画？
CSS 的 transition 只能对可计算的数值型属性做插值，而 auto 不是一个具体数值，浏览器无法知道“从 0 到 auto”该按什么步长变化。结果就是：样式立刻跳变，没有过渡效果。
用 max-height 替代 height 是最常用解法
前提是内容高度有合理上限。给 max-height 设一个明显大于实际内容的高度（比如 500px），再配合 overflow: hidden，就能骗过浏览器做平滑过渡：
.collapsible {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
<p>.collapsible.open {
max-height: 500px; /<em> 必须是具体数值，不能是 auto </em>/
}</p>
- 这个值不是精确控制高度，而是“上限”，只要比内容最高可能值大就行
- 如果内容超了（比如突然塞进一段长文本），会溢出或被截断
- 动画时间越长，
max-height值就得越大，否则末尾会卡住
想真正适配任意高度？得用 JS 测量 + height 内联设置
纯 CSS 搞不定动态 auto，必须靠 JS 先读出真实高度，再设为内联 style.height，触发重排后立刻切回 auto：
const el = document.querySelector('.collapsible');
el.style.height = '0';
el.offsetHeight; // 强制重排，确保 height=0 生效
el.style.height = `${el.scrollHeight}px`; // 瞬间设为目标高度
setTimeout(() => {
el.style.height = 'auto'; // 动画结束后才设 auto，避免后续 resize 失效
}, 300); // 要和 transition 时间一致
- 必须在设
height前触发一次重排（比如读offsetHeight），否则浏览器会合并样式操作，动画不启动 - 最后切回
auto很关键：否则后续 JS 修改内容时，高度不会自动适应 - 如果元素有 padding/border，
scrollHeight已包含它们，不用额外加
更现代的选择：animate() + height 关键帧（但兼容性有限）
Chrome 122+ / Safari 17.4+ 支持对 height 使用 animate() 并传入 auto —— 但它底层仍是先测量再补帧，且不支持 transition 回退。实际用起来不如 JS 方案稳：
el.animate(
[{ height: '0' }, { height: 'auto' }],
{ duration: 300, easing: 'ease-out' }
);
- 动画结束时
height仍是内联的像素值，不是auto，要手动清理 - Firefox 和旧版 Chrome 完全不支持，降级逻辑还得写 JS 测量方案
- 无法和 CSS class 切换联动，得全 JS 控制状态
CSS 动画里最让人误以为简单实则暗坑最多的就是高度过渡——max-height 看似取巧，但上限难估；JS 测量看似麻烦，却是唯一真正可控的方式。别信“一行 CSS 解决”，真要适配任意内容，测量那一步绕不开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
