Flex项目动画尺寸突变的根本原因是width/height动画触发频繁重排，应改用transform+will-change方案避免布局计算。
Flex项目动画时尺寸突变，根本原因是重排触发时机不对
Flex容器里直接对 width 或 height 做 CSS 动画，浏览器会在每一帧强制计算 flex 项的布局（即重排），导致卡顿、跳变，甚至动画中断。这不是性能差的问题，是 Flex 布局机制和 CSS 动画触发条件冲突造成的。
- Flex 项的最终尺寸由容器
display: flex、flex-grow/flex-shrink和内容共同决定，不是纯 CSS 可控的“静态值” - 对
width动画时，浏览器每帧都要重新 resolve flex 基线、比较剩余空间、分配收缩/拉伸——这比普通块级元素开销高得多 - 常见错误现象：
transform: scaleX(0)看起来平滑，但一旦加了flex: 1或min-width，立刻出现“先缩再弹”或“卡在中间尺寸”
用 transform + will-change 替代 width/height 动画
真正可控、不触发重排的方案，是绕过尺寸计算，只操作渲染层。核心就是：把尺寸变化“翻译”成位移或缩放，并告诉浏览器提前准备。
- 不要动
width、height、max-width，改用transform: scaleX(X)或transform: scale(X, Y) - 如果动画涉及高度变化（比如展开折叠），给父容器加
overflow: hidden，子元素用transform: scaleY()+transform-origin: top - 必须加
will-change: transform（写在动画元素上），否则 Safari 和旧版 Chrome 可能仍走主渲染管线 - 示例：
.item { transform: scaleX(1); transform-origin: left; will-change: transform; transition: transform 0.2s ease-in-out; } .item.collapsed { transform: scaleX(0); }
Flex 容器本身尺寸动画也要防重排
当整个 flex 容器（比如侧边栏）需要展开/收起时，直接 animating width 同样危险——它会迫使所有子项反复重排。
- 正确做法：给容器加
transform: translateX()+overflow: hidden，用位移模拟宽度变化 - 如果必须响应式调整容器宽度（比如从 240px → 60px），优先用 CSS 自定义属性 +
@property（Chrome 110+）配合transition: width，但需 fallback 到 transform 方案 - 兼容性注意：IE 不支持
transform动画 flex 容器，如需支持，得降级为 JS 控制classList切换固定 class，靠 CSS 批量生效，而非连续插值
动画中 flex 项顺序错乱？检查 flex-basis 和 min-content 行为
动画过程中偶尔出现某一项突然换行、挤到下一行，大概率是 flex-basis 和内容内联尺寸没对齐，导致 flex 算法在帧间判断不一致。
立即学习“前端免费学习笔记（深入）”；
- 显式设置
flex-basis: 0或具体像素值（如flex-basis: 200px），避免依赖content的min-content宽度 - 禁用
white-space: nowrap以外的换行控制，尤其别混用word-break: break-word和动画 —— 文本折行会改变行高，间接影响 flex 分配 - 调试技巧：动画期间打开 DevTools 的 Layout 面板，勾选 “Highlight layout shifts”，能直观看到哪一帧触发了意外重排
width、height、flex-basis、min-width 的连续变化，都默认要绕开；能用 transform 解决的，就别碰 layout 属性。 
