flex-grow 无法被 transition 平滑动画化，因其非像素可映射属性，仅参与布局计算；唯一稳定方案是使用 flex 简写并保持 flex-basis 类型一致，或改用 width/transform。
flex-grow 本身不能被 transition 平滑动画化，写 transition: flex-grow 0.3s 在多数场景下会跳变或完全无反应——这不是你代码写错了，是浏览器根本不支持对这个属性做插值计算。
为什么直接 transition flex-grow 总是失效
根本原因在于：flex-grow 不是一个“像素可映射”的属性，它只参与运行时布局分配算法。浏览器每次 layout 阶段才根据容器尺寸、flex-basis、兄弟项的 flex-grow 值重新算出最终宽度，中间没有连续数值路径供过渡引擎插值。
- DevTools 的 Computed 面板里能看到
flex-grow: 1，但实际 width 是auto或一个动态计算值，auto → 200px无法插值 - 哪怕 Chrome 84+ 声称支持
flex-grow过渡，也仅在特定组合下（如flex: 1 1 200px → flex: 3 1 200px）勉强可用，Safari 14.0 及更早版本大概率卡帧 - 父容器宽度若由 JS 动态修改（比如
el.style.width = '500px'），会触发强制同步 layout，直接打断过渡链
用 flex 简写替代单独改 flex-grow
唯一能稳定触发平滑过渡的方式，是把 flex-grow、flex-shrink、flex-basis 当作一个原子单位来切换，即使用 flex 简写，并确保起止状态的 flex-basis 类型一致（都用 px 或都用 %，绝不能混用 auto 和数字）。
- ✅ 正确：
flex: 1 1 200px→flex: 3 1 200px（flex-basis都是固定像素，浏览器可安全插值flex-grow） - ❌ 错误：
flex: 1→flex: 3（后者等价于flex: 3 1 0，flex-basis: 0与前者隐式0%不等价，易跳变） - ⚠️ 注意：
flex: 1 200px会隐式设flex-shrink: 1，建议显式写出三值，避免意外压缩
.item {
flex: 1 1 200px;
transition: flex 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.item.active {
flex: 3 1 200px;
}
更稳妥的 fallback 方案：用 width 或 transform
当兼容性要求高（比如需支持 iOS Safari 13.1）、或父容器尺寸不固定、或动画频繁触发时，放弃依赖 flex-grow 的过渡逻辑，改用真正可预测的属性：
-
width+flex-shrink: 0：适用于已知最大尺寸的场景，必须同时设min-width和width（如min-width: 100px; width: 100px;），否则起始值仍是auto -
transform: scaleX()：不触发重排，性能最优，适合纯视觉伸展（注意加transform-origin: left center控制缩放锚点） - 避免
max-width单独过渡：部分浏览器对max-width插值支持不稳定，建议搭配width使用
.item {
width: 100px;
flex-shrink: 0;
transition: width 0.3s ease;
}
.item.expanded {
width: 300px;
}
最容易被忽略的强制重排陷阱
哪怕你用了正确的 flex 简写过渡，只要父容器的尺寸在动画过程中被 JS 修改（例如监听 resize 改 container.style.width），或者子项内文本流导致容器高度动态变化，就会触发强制同步 layout —— 此时过渡直接中断，退化为跳变。
这种问题在移动端软键盘弹出、100vh 失效、或嵌套 flex 容器中尤其隐蔽。真正卡住人的从来不是 flex-grow 写法，而是它对整个尺寸链的强依赖：任意一环的动态重排，都会让精心写的 transition 归零。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
