不能用 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 折叠动画，都基于以下任一机制：

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 过渡的实际写法和坑点

这是最通用、最稳妥的方案，适配

、

、

等任意块级容器。

• 初始状态：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 容器中生效，且要求菜单与主内容是同一父容器的直接子元素
• 普通顶部导航栏（
  包含
  ）不是 flex 子项结构，硬套 flex-basis 会失效
• 如果真用 Flexbox 布局导航栏（比如横向菜单项用 flex 排列），折叠对象仍是整个
  或
  ，依然得走 max-height 路线

最容易被忽略的一点：动画是否生效，80% 取决于 HTML 结构是否匹配所选 CSS 方案 —— 不是代码写错了，而是 input:checked ~ .menu 找不到目标，或 .nav-menu 被嵌套在多余

里切断了 flex 上下文。先理清结构，再调样式。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！