css transition无法对height: auto动画，因其非数值属性，浏览器无法插值；应改用max-height（如0→500px）配合overflow: hidden模拟，或grid-template-rows（0fr→1fr）过渡，必要时用js动态读取scrollheight实现精准动画。
不能直接对 height: auto 做 transition，浏览器根本不识别这个动画——它不是数值，无法插值。你看到的“跳变”，不是参数没调好，是底层机制不支持。
为什么 height: auto 无法过渡
CSS 过渡引擎只处理可计算、可插值的数值：比如 100px、2em、calc(100vh - 50px)。而 auto 是布局阶段的计算结果，每次 reflow 才确定，没有中间帧概念。写 transition: height 0.3s 后切到 height: auto，实际效果就是“啪”一下撑开，毫无过渡。
用 max-height 模拟的实操要点
这是兼容性最好、零 JS、最易落地的方案，但容易踩坑：
-
max-height起始值别设0：某些字体下会触发 margin 折叠异常，推荐用max-height: 0.01px或max-height: 1em - 目标值别堆
9999px：Safari 可能重排抖动；按业务预估最大行数 × 行高更稳，比如max-height: 6em或max-height: 120px - 必须配
overflow: hidden：否则内容溢出，父容器被撑高，动画失效 - 建议同时过渡
opacity：否则文字先闪现再拉升，视觉割裂；写成transition: max-height 0.3s ease, opacity 0.3s ease
用 grid-template-rows: 0fr → 1fr 的适用条件
这是语义更干净的替代方案，但限制明确：
- 容器必须是单行 grid：
display: grid+grid-template-rows: 0fr（初始）→grid-template-rows: 1fr（展开） - 内部内容必须是单个子元素（比如一个
<div> 包住全部内容），否则高度计算不准<li>Safari 16.4 之前不支持 <code>0fr → 1fr过渡，旧版需 fallback 到max-height - 内部含
position: absolute元素时，它不参与 fr 分配，可能导致视觉高度不足
真正麻烦的不是选哪个方案，而是内容高度不可控时——比如用户粘贴大段富文本、嵌入第三方 iframe、或动态插入图片。这时 max-height 的预估值可能不够，grid 方案又受限于结构。这种场景下，JS 测高仍是唯一可靠路径，但要小心避免 layout thrashing。
