height:auto无法直接CSS动画，因浏览器无法计算其数值；可用max-height替代实现过渡，或用JS读取scrollHeight后精确控制height动画。
height:auto 无法直接做 CSS 动画的原因
CSS 的
和
对
属性起效，前提是它能被浏览器计算出明确的数值。而
是一个“计算后才知结果”的状态，动画引擎没法知道“从 0px 到多少 px”，所以直接写
+
会失效——菜单点开时立刻显示，关闭时直接消失，没有过渡。
用 max-height 替代 height 实现折叠动画
这是最常用、兼容性好、无需 JS 的方案。核心是避开
，改用
做“视觉高度限制”，再靠过渡让它展开/收起。
设置初始
，并加
展开时设一个足够大的
（比如
），大于内容实际高度即可
动画用
注意：不能设成
，因为
无法参与过渡计算
示例：
JS 驱动下更精确控制 height 动画（需获取真实高度）
当内容高度变化大、或需要严格按像素动画时，
容易因预设值不准导致卡顿或提前停住。这时得靠 JS 先读取元素
，再设目标
。
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
先设
+
用
或
获取真实高度
用
触发重排，再设
关闭时可直接设回
，但记得在动画结束后补上
，否则影响后续 JS 计算
关键点：
动画必须在设完目标值后触发一次重排（如读取
），否则浏览器会合并样式操作，动画不启动。
滚动容器内折叠菜单的额外陷阱
如果菜单嵌在
的父容器里，展开时可能因高度突增导致父容器滚动条闪现或跳动。
避免在动画中让父容器高度反复重排，可给父容器加
（现代浏览器）减少影响
更稳妥的做法：展开前临时设父容器
或用
提升图层，隔离重排
若菜单含表单控件（如
），iOS Safari 下
动画可能触发软键盘异常弹出，此时优先用
方案
真正难的不是怎么动起来，而是动得稳、不闪、不卡、不干扰其他交互——这些细节往往只在真机多尺寸测试时才暴露。
transitionanimationheightheight: autoheight: autotransition: height 0.3sheightmax-heightmax-height: 0overflow: hiddenmax-heightmax-height: 500pxtransition: max-height 0.3s ease-in-outmax-height: nonenonedetails-menu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
}
details-menu.open {
max-height: 500px;
}max-heightscrollHeightheightheight: 0overflow: hiddengetBoundingClientRect()scrollHeightrequestAnimationFrameheight: ${target}pxheight: 0height: autoheightoffsetHeightoverflow-y: autocontain: layoutposition: absolutetransform: translateZ(0)inputheightmax-height