height设为auto时transition失效，因浏览器无法对非数值的auto插值；应改用max-height配合具体数值和overflow:hidden实现过渡动画。
为什么直接对 height 做 transition 会失效
CSS 的
属性在值为
时无法参与过渡动画，浏览器无法计算起始和结束的数值差。很多人尝试写
，结果切换时只有“啪”一下展开或收起，毫无动画感。根本原因是
不是具体像素值，
没法插值。
常见错误写法：
—— 这不会动。
解决方案是绕过
，改用
配合一个「足够大但不过分夸张」的固定上限值。
max-height 过渡的关键取值策略
必须是具体数值（如
、
），且需满足两个条件：
立即学习
“
前端免费学习笔记（深入）
”；
起始状态设为
，同时配
展开状态设为一个
大于内容实际高度的值
，但不能太大（否则动画时间拉长、有延迟感）
常见陷阱：
设成
—— 内容只高 60px，但动画仍按 1000px 差值匀速跑，前 90% 时间几乎看不出变化
设成
—— 视口变化时可能触发重排，且移动端键盘弹出后
改变，导致高度突变
推荐做法：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
用 JS 预读内容高度（
），动态设
（如
）
或保守估算：若内容最多 5 行文本 + 图标，设
通常够用
absolute 定位与 max-height 过渡能一起用吗
不能直接一起用。原因很实在：
元素脱离文档流，其父容器无法感知它的高度变化
折叠面板通常需要父容器「跟着内容撑开/收缩」，而
会让父容器高度坍缩为 0，
过渡就失去参照意义
如果你硬要加
，常见后果：
面板内容闪现错位（尤其在 Safari 中）
点击切换后，面板位置飘到页面左上角
动画还在跑，但视觉上像“瞬间出现又消失”
正确姿势是：
折叠内容区域保持
或
如需遮罩、悬浮按钮等装饰层，再用
叠在面板外部（不影响主内容流）
若真要隐藏时彻底脱离布局（比如做侧边抽屉），应换用
+
，而非依赖
过渡卡顿或不平滑的典型原因
即使写了
，也可能动画生硬。常见根源：
没加
—— 内容会从 0 高度“溢出”，看起来像撕裂
过渡属性写成
—— 一旦其他属性（如
、
）意外变化，会干扰动画节奏
使用了
切换 —— 这会中断整个渲染流程，
动画直接被跳过
面板内含图片或字体加载中 ——
读早了，预设的
不够，动画中途戛然而止
稳妥写法示例：
关键点在于：别指望一次设值通用所有场景，内容高度波动大时，JS 动态注入仍是目前最稳的解法。
heightautotransition: height 0.3sautotransitionheight: auto; transition: height 0.3s;height: automax-heightmax-heightpxemmax-height: 0overflow: hiddenmax-height: 1000pxmax-height: 100vhvhoffsetHeightmax-heightel.style.maxHeight = el.scrollHeight + 'px'max-height: 200pxposition: absoluteabsolutemax-heightabsolutemax-heightposition: staticrelativeabsolutetransform: scaleY(0)opacitymax-heightmax-height: 0 → 200pxoverflow: hiddentransition: all 0.3scolorborderdisplay: none/blockmax-heightscrollHeightmax-height.panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.panel.is-open {
max-height: 200px; /* 或 JS 注入的 scrollHeight */
}