不能用 min-height 做导航栏折叠动画，因其仅设最小高度、不控制实际高度，导致收缩无效、动画卡顿或空白残留；应使用 max-height + overflow: hidden 或 flex-basis（限 flex 直接子元素）方案。
不能用 min-height 做导航栏折叠动画 —— 它不适用于菜单显隐控制，强行用会导致动画卡顿、高度计算错误或完全失效。
为什么 min-height 不适合导航栏折叠
min-height 是约束“最小高度”的属性，不是控制“当前高度”的开关。折叠菜单需要的是从“可见”到“不可见”的状态切换，而 min-height=0 并不会让元素收缩（它只防止更小），元素仍会按内容撑开；设成较大值又无法实现收起效果。
常见错误现象包括：
- 菜单始终显示部分内容，
min-height: 0完全没反应 - 加了
transition: min-height 0.3s但动画不动，因为浏览器不把 min-height 当作可插值的呈现属性 - 配合
overflow: hidden后，文字被裁切但容器高度没变，留出大片空白
真正可用的 CSS 动画方案只有两个
所有稳定、兼容、可访问的纯 CSS 折叠动画，都基于以下任一机制：
立即学习“前端免费学习笔记（深入）”；
-
max-height+overflow: hidden：设初始max-height: 0，展开时过渡到一个安全上限（如500px） -
flex-basis+overflow: hidden：仅适用于侧边栏类布局，且必须是display: flex容器的直接子元素
两者共同前提：
- 不能依赖
height: auto或min-height参与过渡 - 必须显式声明目标值（比如
max-height: 500px，不能写max-height: none） -
overflow: hidden必须始终存在，否则溢出内容会破坏视觉效果
max-height 过渡的实际写法和坑点
这是最通用、最稳妥的方案，适配 <nav></nav>、<ul></ul>、<div class="menu"> 等任意块级容器。
<ul>
<li>初始状态：<code>max-height: 0 + overflow: hidden + transition: max-height 0.35s ease-in-out
max-height: 500px（需大于菜单实际最大高度，200px 对 5 项菜单通常够用）max-height: 100%：百分比在未设父容器高度时无效，且不参与插值opacity 或 transform：若需淡入，单独加 opacity 属性并确保它和 max-height 使用同一 timing function，否则错帧touchstart 触发 class 切换 —— 改用 click 事件更稳Flexbox 侧边栏折叠和导航栏不是一回事
看到“Flexbox”就下意识套用 flex-basis，容易误用到普通导航栏上。
-
flex-basis动画只在display: flex容器中生效，且要求菜单与主内容是同一父容器的直接子元素 - 普通顶部导航栏（
<nav></nav>包含<ul></ul>）不是 flex 子项结构，硬套flex-basis会失效 - 如果真用 Flexbox 布局导航栏（比如横向菜单项用
flex排列），折叠对象仍是整个<nav></nav>或<ul></ul>，依然得走max-height路线
最容易被忽略的一点：动画是否生效，80% 取决于 HTML 结构是否匹配所选 CSS 方案 —— 不是代码写错了，而是 input:checked ~ .menu 找不到目标，或 .nav-menu 被嵌套在多余 <div> 里切断了 flex 上下文。先理清结构，再调样式。 </div>
