width/height过渡跳变源于浏览器无法预知起止尺寸，需显式声明固定值或百分比；max-height hack有局限，更可靠的是js测高+css变量动态控制。
transition 动画中 width/height 突然跳变的典型表现
元素在 transition 过程中尺寸“咔”一下闪动，不是平滑缩放，而是先跳到目标值再回退、或中途卡住——这基本是浏览器没拿到明确起始/结束尺寸导致的。CSS 动画不猜数，它需要可计算的数值锚点。
- 常见于用
auto、max-content或未设宽高的容器里做width/height过渡 - 也出现在父容器用
display: flex且子项未显式设flex-basis时 -
transform: scale()不会跳，但它是视觉缩放，不影响文档流和布局测量
为什么必须显式声明 width 和 height 才能过渡稳定
浏览器渲染引擎在执行 transition 前，要预先计算起点和终点的 layout 尺寸。如果某一边是 auto（比如 height: auto），它无法提前算出像素值——只能等重排后取快照，而重排本身可能被 JS、样式变更打断，造成帧率抖动或跳变。
- 固定值（如
width: 200px）或百分比（需父级有确定尺寸）可被静态解析 -
min-width/max-width不参与transition计算，仅作约束，不能替代width - 使用
vw/vh是可行的，但要注意视口变化时会触发重计算，可能中断动画
用 max-height 过渡代替 height: auto 的实操陷阱
这是最常用的 hack 方案，但它本质是“骗过浏览器”，不是真正解决尺寸不可知问题，所以边界条件极多。
- 必须把
max-height设为一个**明显大于内容实际高度的固定值**（如max-height: 500px），否则收起时会截断 - 起始状态要用
max-height: 0+overflow: hidden，但注意：若内容含 padding/margin/border，0 高度下这些仍占空间，得靠padding: 0或border: none清除 - 过渡时间一长（>300ms），人眼容易察觉“拉伸感”，因为
max-height是线性插值，而真实高度增长是非线性的 - 不能和
height: auto混用——height会被覆盖，max-height才是唯一驱动者
更可靠的替代方案：CSS 自定义属性 + calc() 动态控制
当内容高度确实不可预知（比如富文本、用户输入），又不想用 max-height 魔数，可以借助 JS 测量 + CSS 变量驱动。
立即学习“前端免费学习笔记（深入）”；
- JS 获取真实
offsetHeight后，写入style.setProperty('--target-height', h + 'px') - CSS 中用
height: calc(var(--target-height) * 1px)配合transition: height 0.3s - 关键点：必须确保初始
height是具体数值（哪怕0），不能是auto；否则 transition 不触发 - 注意 SSR 场景：服务端无 DOM，
offsetHeight是 0，需加客户端校验或 fallback
真正难的不是写对那一行 transition，而是判断这个尺寸到底能不能被浏览器提前锁定——只要存在任何一环依赖运行时测量（auto、fit-content、未加载字体影响行高），动画就大概率失稳。
