height: 0 到 height: auto 无法直接过渡，因 CSS transition 需明确数值而 auto 是运行时计算值；常用 max-height 替代，设足够大的固定值并配合 overflow: hidden；JS 方案用 scrollHeight 动态获取真实高度；Chromium 114+ 支持 @starting-style 实现原生 height 过渡但兼容性有限。
height: 0 到 height: auto 无法直接过渡的原因
CSS 的 transition 不支持 height: auto —— 浏览器无法计算 auto 对应的具体像素值，也就没法做插值动画。你写 transition: height 0.3s，从 height: 0 切到 height: auto，结果就是瞬间展开，毫无过渡。
常见错误现象：height 看似设置了过渡，但菜单弹出/收起时仍是“啪”一下跳出来或消失；DevTools 里能看到 height 值在 0 和 auto 之间硬切，没中间帧。
本质是 CSS 动画需要明确的起止数值，auto 是布局阶段才计算的运行时结果，不属于可动画属性。
用 max-height 替代 height 实现近似过渡
这是最常用、兼容性好、无需 JS 的方案：把 height 换成 max-height，并设一个「足够大但不过分夸张」的固定值作为上限。
立即学习“前端免费学习笔记（深入）”；
- 菜单收起时设
max-height: 0，同时加overflow: hidden - 展开时设
max-height: 500px（根据内容最大可能高度估算） - 必须配
transition: max-height 0.3s ease-in-out - 注意：如果内容实际高度超过你设的
max-height，会触发滚动或截断 —— 所以 500px 不是拍脑袋，得看真实下拉项最多几行、字体大小、行高
示例关键片段：
nav ul {<br> max-height: 0;<br> overflow: hidden;<br> transition: max-height 0.3s ease-in-out;<br>}<br>nav.active ul {<br> max-height: 500px;<br>}
用 JS 获取真实高度再过渡（精准但需额外控制）
当菜单内容高度差异大、或有动态增删项时，固定 max-height 容易露馅 —— 比如设了 500px，结果只有两行字，动画就显得拖沓；设小了又怕撑爆。
这时得靠 JS 插手：
- 展开前，先用
element.scrollHeight读取内容真实高度 - 给元素设内联
style.maxHeight = ${height}px，再加active类触发动画 - 收起时，先移除
active类，等transitionend事件 fired 后，再把max-height设回0（否则下次展开会从 0 开始，不是从真实高度） - 别忘了过渡完成后清理内联样式，避免干扰后续操作
性能提示：频繁调用 scrollHeight 会触发重排，但菜单切换本就是用户主动行为，影响微乎其微。
现代方案：使用 @starting-style + height: auto（仅 Chromium 114+）
Chrome/Edge 114 起支持 @starting-style 规则，配合 height: auto 可真正实现原生过渡 —— 但它目前只在 Chromium 新版本生效，Safari 和 Firefox 尚未跟进。
用法要点：
- 必须搭配
contain: layout style在父容器上启用布局隔离 - 用
@starting-style显式声明起始状态：@starting-style {<br> height: 0;<br>} - 目标状态写
height: auto，并确保有transition: height - 别指望它今天就能全平台跑通；把它当作未来解法，而不是当前上线方案
兼容性现状：写了也白写，除非你的产品只跑在最新 Edge 里。
真正容易被忽略的是：过渡是否「感知自然」不只取决于技术路径，更取决于时间函数和高度估算精度 —— 0.3s linear 和 0.25s ease-out 给人的流畅感差很多，而 max-height 设成 200px 还是 600px，直接影响动画节奏是否「跟内容匹配」。
