flex-grow 无法过渡因其非可插值属性，应改用可动画的 flex-basis 或 transform: scalex()；flex-basis 需设具体值并配合 transition，transform 则避免回流但不影响布局流。
transition 为什么对 flex-grow 无效
直接改 flex-grow 值，浏览器不会触发重绘过渡，因为它是布局计算属性，不是可动画的 CSS 属性。CSS 动画引擎只认明确标记为“可插值”的属性，比如 width、opacity、transform，而 flex-grow 不在其中。
常见错误现象：transition: flex-grow 0.3s 写了但完全没效果；或者用 JS 改完 flex-grow 后盒子“啪”一下跳变，毫无缓动。
- 真正能过渡的是
width或max-width（配合overflow: hidden） - 更推荐用
transform: scaleX()模拟宽度伸缩，性能更好且强制走合成层 - 如果必须保持 Flex 行为，可改用
flex-basis并加transition: flex-basis 0.3s—— 它是可动画的
flex-basis + transition 的实操要点
flex-basis 是 flex 项的“初始主轴尺寸”，设成具体值（如 200px 或 50%）后，它就能被 transition 驱动。但要注意：设成 auto 就失效，且必须和 flex-grow: 1 配合才自然。
使用场景：侧边栏收起/展开、卡片高度随内容渐变、响应式列宽切换。
立即学习“前端免费学习笔记（深入）”；
- 写法示例：
transition: flex-basis 0.25s ease-in-out; - JS 触发时，别用
element.style.flexBasis = '300px'直接赋值，先确保元素有内联flex-basis初始值，否则从空字符串到新值会跳变 - IE11 不支持
flex-basis过渡，得降级用width+overflow: hidden
用 transform 替代尺寸变更的边界条件
想让弹性盒子“看起来”在缩放，又不触发回流，transform: scaleX() 是最稳的选择。但它只改变视觉呈现，不影响文档流和其他 flex 项的布局分配 —— 这既是优点也是坑。
容易踩的坑：transform 缩放后，内部文字或子元素点击热区可能错位；如果父容器用了 align-items: stretch，子项高度仍按原始尺寸撑开。
- 务必搭配
transform-origin: left center（水平伸缩时），避免从中心缩放导致偏移 - 需要同步影响布局时，不能单靠
transform，得配合flex-basis或width - 滚动容器里慎用，
transform可能导致子元素position: sticky失效
Chrome DevTools 里怎么验证过渡是否生效
打开开发者工具 → Elements 面板 → 选中目标元素 → 在 Styles 面板里找 transition 对应的属性是否被划掉（表示无效），或看 computed 标签页里 transition-property 是否解析出实际生效的属性名。
关键检查点：
- 确认没有其他样式覆盖了你的
transition，比如从父级继承了transition: none - 在 computed 中查看
flex-basis的当前值是不是数字或百分比，而不是auto - 用
getComputedStyle(el).flexBasis在 Console 里手动读值，避免 JS 赋值后异步渲染未完成造成的误判
复杂点在于：flex 布局本身是多阶段计算（flex-basis → 剩余空间分配 → 最终尺寸），过渡只是在“输入值”层面起作用，中间任何一步被 JS 强制重排或 CSS 触发 layout thrashing，都会打断平滑感。
