用 scrollheight 动态设 max-height 是最稳定方案：收起时先设 max-height 为 scrollheight，读 offsetheight 触发重排，再设为 0；展开时反之；css 需指定 transition: max-height。
直接用 grid-template-rows 做展开收起动画，90% 的情况会卡顿或跳变——不是写法错，是 CSS 无法对 fr 单位做插值过渡；而纯 JS 动态设 height 或 max-height 才是真正可控的路径。
为什么 grid-template-rows: 1fr 0fr 不能平滑过渡
浏览器不支持 fr 单位参与 CSS transition，它不是像素值，无法被插值计算。哪怕你写成 grid-template-rows: 1.2em 0px → 1.2em 3.6em，也必须满足两个前提：行高固定、最大显示行数已知。一旦字体响应式变化（比如 rem 随屏幕缩放）、或内容含图片/图标，真实高度就不可预估。
-
0fr和auto一样，都不是数值型终态，transition 直接跳过 - 即使改成
0px → 3.6em，若容器本身用了flex或grid布局，align-items: stretch可能覆盖你设的行高 - 移动端 Safari 对
grid-template-rows过渡的支持极差，常出现闪烁或回弹
用 scrollHeight 动态设 max-height 的三步关键操作
这是目前最稳定、兼容性最好、且不依赖字体/行高预设的方案。核心不是“设个值”，而是强制浏览器分步重排，否则动画会被合并掉。
- 收起时：先设
el.style.maxHeight = el.scrollHeight + 'px'，再读el.offsetHeight（触发重排），最后设el.style.maxHeight = '0' - 展开时：先设
el.style.maxHeight = '0'，再读el.offsetHeight，最后设el.style.maxHeight = el.scrollHeight + 'px' - CSS 必须写
transition: max-height 0.35s ease-out，不能只写all，否则其他属性变化会干扰动画节奏 - 别用
offsetHeight或clientHeight替代scrollHeight——它们不含溢出部分，算出来永远是截断后的高度
什么时候该放弃 max-height 改用 height + overflow: hidden
当文本块内含异步加载的图片、Web Font 尚未渲染完成、或使用了 line-height: normal 这类不可靠值时，scrollHeight 可能在动画中途突变，导致塌缩不彻底或展开后留白。这时更稳的做法是 JS 控制 height：
- 初始状态设
height: 0; overflow: hidden; - 展开前先
el.style.height = 'auto';，再立即读el.scrollHeight，然后设回el.style.height = '0'，再走上面那套三步法 - 动画结束后清空
height（设为''），恢复自然流，避免后续 JS 计算高度出错 - 加
will-change: height能在长列表中减少重绘抖动，尤其在 iOS Safari 上
真正难的不是写对那几行 JS，而是每次 DOM 更新后是否重新校准高度——比如用户缩放页面、系统字体设置变更、或 SSR 渲染后 JS 滞后执行，都可能让 scrollHeight 失效。所以生产环境里，别只依赖一次测量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
