只设 height 过渡无效，因浏览器无法计算 auto 像素值；应改用 max-height 配合 overflow: hidden 实现渐变效果，必要时用 JS 动态获取 scrollHeight 并配合 visibility 精确控制。
为什么只设 height 过渡没效果
直接对 height 从 0 到 auto 加 transition 是无效的，因为浏览器无法计算 auto 的具体像素值，过渡会立刻跳变。常见表现是菜单“啪”一下弹出来，毫无动画感。
- 不能写
transition: height 0.3s;+height: auto; - 也不能靠
overflow: hidden掩盖——没用，高度还是不会渐变 - 本质是：CSS 过渡只认确定数值（如
24px、100%），不认auto
用 max-height 替代 height 是最稳妥方案
给容器设一个足够大的 max-height（比如 500px），再配合 overflow: hidden，就能让过渡“看起来像在拉伸”。关键在于这个值必须大于内容实际高度，但又不能过大（否则动画时间拉得太长）。
nav ul {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
nav.active ul {
max-height: 500px;
opacity: 1;
}
-
max-height: 0→max-height: 500px是可过渡的，浏览器能线性插值 - 同时加
opacity过渡，避免文字在展开中途就突然清晰显示 - 如果菜单项高度变化大（比如含图片或换行文本），把
500px改成更保守的80vh或预估最大值
想真正“逐行展开”？得用 JS 测量真实高度
当菜单结构复杂、高度不可预估，或者要求精确匹配内容高度时，纯 CSS 的 max-height 就显得笨重（比如收起时还留白，或展开时卡顿）。这时需 JS 动态读取 scrollHeight。
function toggleMenu(el) {
const menu = el.nextElementSibling;
if (menu.style.maxHeight) {
menu.style.maxHeight = '0';
} else {
menu.style.maxHeight = menu.scrollHeight + 'px';
}
}
- 触发前先设
max-height: 0，再用offsetHeight或scrollHeight获取真实高度 - 注意：设完
max-height后要等一帧（requestAnimationFrame）再强制重排，否则可能读到旧值 - 收起后建议清空
style.maxHeight，避免影响后续 JS 控制
opacity 单独过渡不够，记得配 visibility
只靠 opacity: 0 → 1 会让元素仍占布局空间，且鼠标可穿透（尤其收起时）。必须搭配 visibility 控制可交互性与渲染行为。
立即学习“前端免费学习笔记（深入）”；
nav ul {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
nav.active ul {
opacity: 1;
visibility: visible;
}
-
visibility: hidden不占空间但保留盒子尺寸，所以得和max-height方案配合使用 - 不能只用
display: none—— 它不可过渡，会导致动画中断 - 如果菜单内有表单控件（如
input），收起时没关掉visibility可能导致焦点残留或键盘事件误触
