height: 0 到 height: auto 无法过渡，因 auto 非可插值数值，浏览器无法计算起点与终点；常用解法是用 max-height 替代并配合 overflow: hidden，或采用 clip-path、transform: scaley()、javascript 动态测量 scrollheight 等方案。
height: 0 到 height: auto 的 transition 不会动，不是你代码写错了，是浏览器根本没法算——auto 没有确定的像素值，过渡引擎连起点和终点都拿不到数字，自然没法插值。
为什么浏览器拒绝计算 height: auto 的过渡值
CSS transition 只能在两个可计算、可比较的数值之间做线性插值。height: auto 的实际像素高度取决于内容、字体、行高、padding、box-sizing 等多个 layout 阶段才确定，而 transition 发生在 style 计算阶段，早于 layout。此时浏览器连“这个 div 最终多高”都不知道，更没法生成中间帧。
常见错误现象：height: 0; transition: height 0.3s; → height: auto;，结果就是“啪”一下全出来，毫无动画。
-
max-height能用，是因为它始终是具体数值（哪怕设成max-height: 1000px），浏览器可以平滑过渡 -
height支持em、rem、vh等相对单位，但不支持auto参与插值 - 即使你用
calc(100% + 20px)，只要里面没auto，它仍是可计算的；但calc(auto + 10px)是非法的，CSS 解析器直接忽略整条声明
max-height 过渡的坑：设多大才算“足够大”
用 max-height: 0 → max-height: 500px 是最常用解法，但它依赖你对内容高度的预估。设小了会截断，设太大则动画“拖尾”——比如内容只高 80px，却按 500px 做 0.3s 动画，前 0.05s 就展完了，剩下 0.25s 是空等。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 移动端菜单常见高度在 200–300px，设
max-height: 320px较稳妥 - 富文本或用户生成内容（UGC）建议留余量：
max-height: 800px，但需搭配overflow: hidden防溢出 - 如果内容含图片且未设置宽高属性，加载后重排会导致
max-height失效——图片加载完成前 DOM 高度是错的 - 注意
padding和border不随max-height过渡，得单独加进transition，否则收起时边缘“跳变”
clip-path 或 transform: scaleY() 更适合动态内容
当内容高度完全不可控（比如服务端渲染后 JS 才加载、评论区异步插入），max-height 的预估就不可靠。这时视觉裁剪类方案更稳：
-
clip-path: inset(0 0 100% 0)→clip-path: inset(0)：从底部遮盖到完全显示，不依赖尺寸，Chrome 55+/Firefox 54+/Safari 15.4+ 支持 -
transform: scaleY(0)→transform: scaleY(1)：需配transform-origin: top，否则缩放中心在中间，内容会“往下掉” - 两者都不需要
overflow: hidden（clip-path本身裁剪，transform不影响文档流），但子元素若有position: absolute，可能需重置transform避免偏移
JS 测量 scrollHeight 是唯一真·auto 方案
如果你必须严格按真实高度动画（比如折叠面板里有动态图表、iframe 或未加载图片），就得 JS 介入：
- 展开前：设
element.style.height = '0'+element.style.overflow = 'hidden' - 触发后：立即读
element.scrollHeight，再设element.style.height = scrollHeight + 'px' - 关键一步：读一次
element.offsetHeight强制重排，否则浏览器可能把两步样式合并，动画不触发 - 收起时：用
getComputedStyle(element).height获取当前值，再过渡回'0' - 注意：若内容含异步加载资源（如 lazy image），需等
load事件后再测scrollHeight，否则测的是占位高度
真正麻烦的永远是混合场景——比如一个面板里既有固定文字又有动态图表，这时候 max-height 不够准，clip-path 缩放感太强，JS 测量又得处理各种生命周期钩子。选哪种，得看你的 DOM 更新节奏和兼容性底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
