height: 0 无法与 height: auto 过渡，因 CSS 过渡不支持 auto；改用 max-height（如 0→500px）配合 opacity 和 visibility，并设 overflow: hidden，可实现真正收放动画。
用 height + opacity 过渡时，为什么菜单不动画、直接闪现？
因为 height: 0 无法和 height: auto 形成可过渡的数值——CSS 过渡只认具体数字（如 px、rem），不认 auto。设成 height: 0 → height: auto 看似合理，实际浏览器跳过过渡，瞬间切换。
怎么让 height 过渡真正生效？
必须用固定数值替代 auto。常见做法是提前获取菜单内容高度，再动态设为 height 值。但更稳妥、无需 JS 计算的方式是：用 max-height 替代 height，并设一个足够大的安全上限（比如 500px）。
-
max-height支持过渡，且max-height: 0→max-height: 500px能触发动画 - 只要菜单真实高度不超过
500px，视觉上就等效于height: auto - 配合
overflow: hidden防止内容溢出
完整 CSS 动画组合怎么写？
光有 max-height 不够，还要控制可见性、透明度和过渡时机。关键点是：隐藏状态要同时满足 max-height: 0、opacity: 0、visibility: hidden；显示时三者同步恢复，且用 transition 统一声明。
nav ul {
max-height: 0;
opacity: 0;
visibility: hidden;
overflow: hidden;
transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s;
}
nav.active ul {
max-height: 500px;
opacity: 1;
visibility: visible;
}
注意：visibility 本身不可过渡，但加上时间值后，浏览器会在该时刻切换（延迟隐藏/显示），配合 opacity 实现“渐隐渐显+收放”同步感。
立即学习“前端免费学习笔记（深入）”；
为什么不能只靠 opacity？
只用 opacity: 0 → opacity: 1 会让菜单始终占据布局空间，点击区域还在、影响下方元素交互。而 max-height + overflow: hidden 真正收缩占位，动画结束时 DOM 尺寸才恢复。如果菜单内有 position: absolute 子项，还要额外确保父容器 position: relative，否则 overflow: hidden 可能失效。
