height: 0 → height: auto 过渡无效，因auto不可动画，浏览器无法插值；可用max-height模拟、transform+opacity视觉展开或js测高后过渡。
height: 0 → height: auto 过渡为什么无效
因为 height: auto 是一个不可动画的值，CSS 过渡无法计算“从 0 到 auto”的中间状态，浏览器直接跳变，看起来就像没过渡。
- 常见错误现象：
transition: height 0.3s写了但元素瞬间显示/隐藏，毫无展开感 - 本质原因：auto 不是具体数值，浏览器不知道“auto”到底等于多少像素，没法插值
- 替代思路不是“骗过浏览器”，而是用它能算的值——比如
max-height、transform或 JS 测高
用 max-height 模拟 height 过渡（最常用）
把 height 换成 max-height，设一个“足够大但不过分”的固定值（如 max-height: 500px），让浏览器有明确的起止数值可过渡。
- 适用场景：内容高度相对可控（比如菜单、提示框、折叠面板），且最大高度可预估
- 关键参数：
max-height起始设0，结束设一个明显大于内容实际高度的值（500px比9999px更安全，避免滚动条抖动或性能问题） - 必须同时设置
overflow: hidden，否则内容会溢出可见 - 示例：
div { max-height: 0; overflow: hidden; transition: max-height 0.25s ease-out; }<br>div.open { max-height: 500px; }
用 transform + opacity 实现视觉展开（更轻量）
当不需要真实“高度变化”参与布局（比如浮层、弹窗），优先用 transform: scaleY(0) + opacity，性能更好、无测高依赖。
- 使用场景：模态框、下拉菜单、Toast 提示等不挤占文档流的元素
- 好处：GPU 加速，不触发重排（reflow），比 height/max-height 更流畅
- 注意点：scaleY(0) 会让子元素也缩为 0，需确保子元素不依赖自身尺寸做布局；
opacity: 0配合防止点击穿透 - 示例：
div { transform: scaleY(0); opacity: 0; transform-origin: top; transition: transform 0.2s, opacity 0.2s; }<br>div.open { transform: scaleY(1); opacity: 1; }
JS 测高后过渡 height（精准但需干预）
只有当你必须让父容器真实撑开、且内容高度完全不可预估时，才考虑 JS 先读取 scrollHeight，再设为 height 过渡。
- 典型错误：直接在 class 切换后立即读
offsetHeight—— 此时 DOM 还没重绘，读到的仍是 0 - 正确时机：class 加上后，用
getComputedStyle或offsetHeight前加void el.offsetHeight强制重排，或用requestAnimationFrame - 兼容性影响：服务端渲染（SSR）页面首次加载时，JS 还没执行，可能闪一下；需要 fallback 到
max-height方案保底 - 简写逻辑：
el.classList.add('open');<br>void el.offsetHeight; // 强制重排<br>el.style.height = el.scrollHeight + 'px';
max-height 是平衡性最好的选择，但它的“足够大”值得认真想——设小了会截断，设太大又拖慢动画曲线。真正难的不是写哪行代码，是判断这个元素到底属于哪种展开需求。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
