直接用 transition: height 无效，因 height: 0 受 padding/border/margin 影响且 height: auto 不可过渡；应改用 max-height 配合 overflow: hidden 实现动画，并注意 padding/border 单独过渡及取值合理性。
为什么直接用 transition: height 无效
很多开发者试过给导航菜单的 height 加 transition，但发现展开/收起时没有动画——这是因为当高度设为 height: 0 时，如果内容有 padding、border 或子元素 margin，实际渲染高度可能不为 0；更关键的是，height: auto 无法被 CSS 过渡识别，浏览器不知道“auto”该过渡到多高。
用 max-height 替代 height 是最稳方案
把 height 换成 max-height，并设置一个足够大的固定值（大于菜单最大可能高度），就能让过渡生效。同时配合 overflow: hidden 隐藏溢出内容。
-
max-height: 0+overflow: hidden→ 完全收起（视觉上消失） -
max-height: 500px（或更大）→ 展开（只要内容高度 ≤ 500px，就能完整显示） - 过渡写在
max-height上：transition: max-height 0.3s ease-in-out - 注意：不要用
display: none切换，否则会中断过渡；状态切换靠 class 控制
.nav-menu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
}
.nav-menu.open {
max-height: 500px;
}
padding 和 border 的过渡要单独处理
max-height 过渡本身不会带动 padding 或 border 动画，如果菜单有内边距或边框，收起时边缘会“突兀消失”。解决办法是：把 padding 和 border 也加进 transition，并在收起状态设为 0。
- 收起时设
padding: 0、border: none - 展开时恢复原值，且都参与过渡：
transition: max-height 0.3s, padding 0.3s, border 0.3s - 注意顺序：多个 transition 属性需一一对应，或统一用
transition: all 0.3s（但慎用all，可能意外触发其他属性动画）
JavaScript 控制 class 时机很重要
用 JS 切换 .open 类时，如果 DOM 尚未重排（reflow），浏览器可能跳过过渡。常见错误是在 element.classList.add('open') 后立刻设置 max-height，但没等浏览器计算完尺寸。
立即学习“前端免费学习笔记（深入）”；
- 稳妥做法：先加 class，再用
getComputedStyle强制重排，再设目标高度（不过用max-height方案通常不需要这步） - 更简单：确保初始状态是
max-height: 0，JS 只负责切换 class，让 CSS 自己驱动过渡 - 如果菜单高度动态变化（比如响应式下子项增减），500px 可能不够——这时得用 JS 测量真实高度再设，但会失去纯 CSS 方案的简洁性
max-height 的取值：设太小会截断内容，设太大则过渡时间变长（即使内容很短，也要“拉满”到那个值）。留 100–150px 余量通常够用，但别盲目写成 9999px。 
