CSS菜单展开动画：高度与透明度过渡技巧

本文深入解析了CSS中实现平滑菜单展开动画的核心技巧：由于height属性无法在0与auto之间过渡，作者推荐采用max-height配合opacity和visibility的组合方案——通过设置足够大的max-height上限（如500px）、overflow: hidden裁剪内容，并统一控制三者过渡时机，既能规避JavaScript计算高度的复杂性，又能实现真正收缩占位、渐隐渐显、交互友好的原生动画效果，同时提醒了absolute子元素等常见陷阱及应对方法。

用 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学习网公众号！