CSS菜单动画：高度与透明度平滑过渡

本文深入解析了CSS菜单展开动画中常见的“闪现”问题根源——height: 0 与 height: auto 无法过渡，并给出真正平滑、无需JavaScript的纯CSS解决方案：利用max-height替代height，配合opacity和visibility的协同控制及overflow: hidden，实现视觉上等效于auto高度的收放动画；同时强调了仅靠opacity的布局缺陷，以及处理绝对定位子元素等关键细节，让开发者轻松打造既美观又功能健全的响应式导航菜单。

用 height + opacity 过渡时，为什么菜单不动画、直接闪现？

因为 height: 0 无法和 height: auto 形成可过渡的数值——CSS 过渡只认具体数字（如 px、rem），不认 auto。设成 height: 0 → height: auto 看似合理，实际浏览器跳过过渡，瞬间切换。

怎么让 height 过渡真正生效？

必须用固定数值替代 auto。常见做法是提前获取菜单内容高度，再动态设为 height 值。但更稳妥、无需 JS 计算的方式是：用 max-height 替代 height，并设一个足够大的安全上限（比如 500px）。

• max-height 支持过渡，且 max-height: 0 → max-height: 500px 能触发动画
• 只要菜单真实高度不超过 500px，视觉上就等效于 height: auto
• 配合 overflow: hidden 防止内容溢出

完整 CSS 动画组合怎么写？

光有 max-height 不够，还要控制可见性、透明度和过渡时机。关键点是：隐藏状态要同时满足 max-height: 0、opacity: 0、visibility: hidden；显示时三者同步恢复，且用 transition 统一声明。

nav ul {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s;
}

nav.active ul {
  max-height: 500px;
  opacity: 1;
  visibility: visible;
}

注意：visibility 本身不可过渡，但加上时间值后，浏览器会在该时刻切换（延迟隐藏/显示），配合 opacity 实现“渐隐渐显+收放”同步感。

为什么不能只靠 opacity？

只用 opacity: 0 → opacity: 1 会让菜单始终占据布局空间，点击区域还在、影响下方元素交互。而 max-height + overflow: hidden 真正收缩占位，动画结束时 DOM 尺寸才恢复。如果菜单内有 position: absolute 子项，还要额外确保父容器 position: relative，否则 overflow: hidden 可能失效。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS菜单动画：高度与透明度平滑过渡》文章吧，也可关注golang学习网公众号了解相关技术文章。