height: auto 无法 transition，因浏览器无法解析“auto”为具体像素值；max-height 是最通用替代方案，需合理设置起始和结束值并清除内联样式；js 动态读取 scrollheight 可精准适配未知高度；transform: scaley 虽高效但不改变文档流。
height: auto 无法 transition，必须绕开
直接写 transition: height 0.3s 并设 height: auto 是无效的——浏览器根本不知道“auto”等于多少像素，只能硬切，导致瞬间展开或收起。这不是动画卡顿，是压根没走过渡逻辑。
- 哪怕你写了
height: 0 → height: auto，CSS 引擎也拒绝解析终点值 -
min-height、max-height、line-height都不参与 height 的过渡计算 - 用
vh或百分比？前提是父容器高度固定，否则仍是不可知尺寸
max-height 过渡要设对数值，不是越大越好
max-height 是目前最通用的替代方案，但它不是“设个大数就完事”。设错值会截断内容或拉长动画，尤其在移动端更明显。
- 起始状态必须是
max-height: 0+overflow: hidden - 结束值不能拍脑袋写
max-height: 1000px；建议按常见内容预估，比如200px～600px - 如果内容含
padding、border，0 高度下这些仍占空间，需额外清掉（如padding: 0） - 动画时间超过
300ms时，人眼容易察觉“线性拉伸感”，因max-height插值是匀速的，而真实高度增长是非线性的
JS 动态读取 scrollHeight 才能真正适配内容
当内容高度完全不可预测（比如用户粘贴的富文本、动态插入的图片），靠预估 max-height 就不靠谱。这时必须用 JS 获取真实高度，但要注意触发时机，否则会 layout thrashing。
- 展开前先临时设
max-height: none，再读el.scrollHeight（这一步强制重排） - 把读到的值赋给
max-height，再移除max-height: none让 transition 生效 - 收起后记得清除内联
max-height，否则下次展开可能失效 - 别在动画中反复读
offsetHeight或getComputedStyle，会打断帧节奏
transform: scaleY 虽快，但得处理文档流残留
用 transform: scaleY() 做高度模拟确实零重排、GPU 加速，但它不改变元素实际占位——收缩时仍撑着原来的空间，兄弟元素不会上移。
- 初始状态：
transform: scaleY(0)+transform-origin: top+overflow: hidden - 展开后：
transform: scaleY(1)，但父容器若为display: flex，得加align-self: flex-start防止错位 - 子元素会被一起缩放，需在内部加
transform: scaleY(1)抵消（注意层级和 transform-origin 一致性） - 慎用
visibility: hidden配合 scaleY——它不触发布局，但会导致 focus/aria 状态丢失
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
