flex-grow 无法直接过渡，因其为非数值型计算属性，无中间状态；应改用可动画的 flex-basis（需带单位）或 width 配合 transition 实现平滑伸缩。
flex-grow 本身不能被 transition 动画化 —— 浏览器不支持对这个属性做插值过渡，直接写 transition: flex-grow 0.3s 是无效的。
为什么 flex-grow 无法直接过渡
因为 flex-grow 是一个“计算型布局属性”，它不对应像素值，而是参与弹性盒模型的运行时空间分配算法。浏览器在每次 layout 阶段才根据所有项目的 flex-grow、flex-basis、容器尺寸等重新计算最终宽度，中间没有可插值的中间状态。
常见错误现象：
– 加了 transition: flex-grow 0.3s 却毫无动画效果
– 控制台无报错，但视觉上是突变（jump）而非平滑伸缩
– 某些旧版 Safari 或 Firefox 可能触发 layout 重排抖动，反而更卡
用 flex-basis + transition 替代方案
真正可动画的是 flex-basis（它本质是长度值），只要把它设为具体数值（如 100px、20%），再配合 flex-grow: 1，就能实现“视觉上按比例伸缩”的效果，且过渡自然。
- 确保父容器为
display: flex，且子项未设置冲突的width - 子项初始状态设
flex: 0 1 100px（即flex-grow: 0; flex-shrink: 1; flex-basis: 100px） - 目标状态设
flex: 1 1 300px（flex-grow: 1启用增长，flex-basis: 300px提供动画起点） - 必须显式声明
transition: flex-basis 0.3s ease，不能只写transition: all（部分浏览器对all中的flex-basis支持不稳定）
示例：
.item {
flex: 0 1 100px;
transition: flex-basis 0.3s ease;
}
.item.expanded {
flex: 1 1 300px;
}
用 width + transition 更稳妥（尤其兼容性要求高时）
如果项目在 flex 容器中不依赖自动分配剩余空间（比如你明确知道最大宽度或布局约束），直接动画 width 是最可靠的方式，兼容性覆盖 IE10+，且行为完全可控。
- 需配合
flex-shrink: 0防止 width 被压缩干扰动画 - 若容器有
flex-wrap: wrap，注意width变化可能触发换行，需同步控制min-width或容器flex-direction - 使用
max-width+width组合可避免内容撑破，比纯width更健壮
示例：
.item {
width: 100px;
flex-shrink: 0;
transition: width 0.3s ease;
}
.item.expanded {
width: 300px;
}
别忽略 flex-basis: 0% 和 flex-basis: 0 的区别
这是最容易被跳过的细节：当 flex-basis 设为 0（无单位），它会被当作 0px 处理；而 0% 在某些浏览器中会尝试按百分比解析（可能 fallback 到 auto），导致动画起点不可控。
实操建议：
– 动画 flex-basis 时，统一用带单位的值（0px、100px、20%）
– 避免混用 0 和 0%，否则 Chrome 和 Safari 对过渡起始值的解释可能不一致
– 若需从“零宽度”开始增长，用 flex-basis: 0px，不是 flex-basis: 0
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
