transition对height: auto无效，因其非数值型属性，浏览器无法插值计算中间帧；须改用max-height（如500px）配合overflow: hidden模拟，或JS动态读取scrollHeight实现精确过渡。
为什么transition对height: auto完全无效
CSS 动画引擎需要明确的起始值和结束值才能插值计算中间帧。height: auto不是数值，而是布局阶段由浏览器根据内容、盒模型、字体等实时推导出的结果——它没有像素量纲，无法参与任何数学插值。你写transition: height 0.3s，再从height: 0切到height: auto，浏览器根本不会尝试过渡，而是直接跳变。DevTools 里能看到height在0和auto之间硬切，没有任何中间状态。
max-height能过渡的根本原因
max-height是具体数值单位（px、em、rem 等），浏览器可以完整插值。只要确保展开时的max-height值大于内容真实高度，视觉上就“像”height: auto一样自适应。
- 收起态：
max-height: 0+overflow: hidden - 展开态：
max-height: 500px（需预估，不能写none） - 必须配
transition: max-height 0.3s ease-in-out - 如果内容实际高度超过你设的
max-height，会截断或出现滚动条——这不是 bug，是方案前提
常见踩坑点：max-height 值怎么选才不翻车
设太小：内容被裁剪；设太大：动画拖尾（比如内容只高 80px，你设max-height: 1000px，最后 200px 是空跑）。
- 粗略估算：行高 × 最大行数 + 内边距 + 边框。例如行高 24px、最多 12 行、上下 padding 各 12px →
24×12 + 24 = 312px，取整到350px较稳妥 - 响应式场景下，用
max-height: 40rem比px更安全（rem 相对根字号） - 绝对不要用
max-height: none——none不可插值，过渡立刻失效 - 注意
font-size缩放、line-height变化会影响实际高度，测试时要覆盖不同字号设置
当内容高度真没法预估时，JS 测高是唯一可靠路径
比如用户可编辑的富文本区域、动态加载的评论列表，max-height方案必然妥协。此时必须 JS 出手：
- 先设
height: 0+overflow: hidden - 用
element.scrollHeight读取真实渲染高度（注意：元素需已插入 DOM 且未被display: none隐藏） - 用
requestAnimationFrame触发重排，再把height设为具体像素值 - 过渡结束后，可清除
height内联样式，回归height: auto以适配后续内容变动
这个环节最容易漏掉的是scrollHeight读取时机——DOM 未挂载、CSS 尚未生效、字体未加载完成，都会导致读数为 0 或偏小。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
