height:auto无法直接css动画，因浏览器无法计算其数值；可用max-height替代实现过渡，或用js读取scrollheight后精确控制height动画。
height:auto 无法直接做 CSS 动画的原因
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方案
真正难的不是怎么动起来，而是动得稳、不闪、不卡、不干扰其他交互——这些细节往往只在真机多尺寸测试时才暴露。
