如何实现CSS折叠菜单动画，从height:auto平滑过渡到固定高度值？

本文共计800个文字，预计阅读时间需要4分钟。

CSS 的 `transition` 和 `animation` 对 `height` 属性起效，前提是它是一个浏览器能计算出的明确数值。例如，`height: auto` 是一个计算后才知道结果的状态，动画引擎无法知道从 `0px` 到多少 `px`。因此，直接写 `height: auto` 和 `transition: height 0.3s` 会失效——菜单点开时立即显示，关闭时直接消失，没有过渡效果。

用 max-height 替代 height 实现折叠动画

这是最常用、兼容性好、无需 JS 的方案。核心是避开 height，改用 max-height 做“视觉高度限制”，再靠过渡让它展开/收起。

• 设置初始 max-height: 0，并加 overflow: hidden
• 展开时设一个足够大的 max-height（比如 max-height: 500px），大于内容实际高度即可
• 动画用 transition: max-height 0.3s ease-in-out
• 注意：不能设成 max-height: none，因为 none 无法参与过渡计算

示例：

details-menu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out; } details-menu.open { max-height: 500px; }

JS 驱动下更精确控制 height 动画（需获取真实高度）

当内容高度变化大、或需要严格按像素动画时，max-height 容易因预设值不准导致卡顿或提前停住。这时得靠 JS 先读取元素 scrollHeight，再设目标 height。

立即学习“前端免费学习笔记（深入）”；

• 先设 height: 0 + overflow: hidden
• 用 getBoundingClientRect() 或 scrollHeight 获取真实高度
• 用 requestAnimationFrame 触发重排，再设 height: ${target}px
• 关闭时可直接设回 height: 0，但记得在动画结束后补上 height: auto，否则影响后续 JS 计算

关键点：height 动画必须在设完目标值后触发一次重排（如读取 offsetHeight），否则浏览器会合并样式操作，动画不启动。

滚动容器内折叠菜单的额外陷阱

如果菜单嵌在 overflow-y: auto 的父容器里，展开时可能因高度突增导致父容器滚动条闪现或跳动。

• 避免在动画中让父容器高度反复重排，可给父容器加 contain: layout（现代浏览器）减少影响
• 更稳妥的做法：展开前临时设父容器 position: absolute 或用 transform: translateZ(0) 提升图层，隔离重排
• 若菜单含表单控件（如 input），iOS Safari 下 height 动画可能触发软键盘异常弹出，此时优先用 max-height 方案

真正难的不是怎么动起来，而是动得稳、不闪、不卡、不干扰其他交互——这些细节往往只在真机多尺寸测试时才暴露。