导航栏折叠动画应使用 max-height + overflow: hidden，而非 min-height；因 min-height 不可动画、不控制实际高度，而 max-height 可设具体像素值过渡，配合 overflow: hidden 实现平滑收展。
别用 min-height 做导航栏折叠动画——它根本不会动，只会留白、卡顿或完全失效。
为什么 min-height 不能用于折叠动画
min-height 是约束下限的属性，不是控制当前高度的开关。设成 0 不会让元素收缩，内容仍会撑开容器；设成大值又无法收起。浏览器也不把 min-height 当作可插值属性，加了 transition: min-height 0.3s 也毫无反应。
常见错误现象包括：
- 菜单始终显示部分内容，
min-height: 0完全没效果 - 加了
transition但动画不动 - 配合
overflow: hidden后文字被裁切，容器高度却没变，下方留大片空白
max-height + overflow: hidden 是最通用方案
这是适配任意块级容器（<nav>、<ul>、<div class="menu">）的稳定写法。
立即学习“前端免费学习笔记（深入）”；
关键点：
- 初始状态：
max-height: 0+overflow: hidden+transition: max-height 0.35s ease-in-out - 展开状态：
max-height: 500px（必须是具体像素值，不能写none或100%） -
max-height的目标值要大于菜单实际最大高度（200px 对 5 项菜单通常够用，含图标或字体加载延迟时可加padding-bottom: 1px微调） - 避免同时过渡
opacity或transform：若需淡入，单独加opacity并确保与max-height使用同一缓动函数，否则错帧
用 checkbox + :checked 实现纯 CSS 切换
不依赖 JS，靠表单状态驱动样式，但结构和选择器必须严格匹配。
正确做法：
- 把
<input type="checkbox" id="nav-toggle">和菜单容器放在同一父级下，且input必须在菜单前 - 用
position: absolute; opacity: 0; pointer-events: none隐藏input，保留触发能力 - 菜单显隐靠
input:checked ~ .menu（中间可能有其他元素）或input:checked + .menu（菜单紧邻其后） - 别用
display: none→block切换：它不可过渡，硬加transition没效果
移动端点击后菜单闪一下再展开？检查是否误用 touchstart 触发 class 切换——改用 click 更稳。
Flexbox 侧边栏折叠 ≠ 导航栏折叠
看到 “Flexbox” 就套用 flex-basis，容易用错场景。
flex-basis 动画只在 display: flex 容器中生效，且要求菜单与主内容是同一父容器的直接子元素。普通顶部导航栏（<nav> 包含 <ul>）不是 flex 容器，强行用 flex-basis 会失效。
真正该用 flex-basis 的，是侧边栏类布局，且必须满足：
- 父容器设
display: flex和flex-direction: row - 侧边栏是该父容器的直接子元素
- 侧边栏显式声明
min-width: 0，否则默认最小宽度会阻止压缩
导航栏折叠，老老实实用 max-height。侧边栏折叠，才考虑 flex-basis。混用就踩坑。
