flex-grow + transition 易跳变卡顿，因浏览器无法对动态分配剩余空间做插值；推荐用 max-width 或 transform 实现平滑伸缩，兼顾性能与语义。
直接对 flex-grow 使用 transition 在现代浏览器中虽能工作，但极易因父容器宽度变化、兄弟元素干扰或 Safari 渲染缺陷导致跳变或卡顿——这不是写法错，而是 flex 布局的计算机制与 CSS 动画管线不兼容。
为什么 flex-grow + transition 会失效或跳帧
浏览器无法对 flex-grow 的“分配剩余空间”这一动态计算过程做插值。即使你写了 transition: flex-grow 0.3s，起始和结束状态若依赖 flex-basis 为 auto、0 或百分比，中间帧就不可预测：
-
flex: 1等价于flex: 1 1 0，而flex: 3是flex: 3 1 0，两者flex-basis都是0，但伸缩逻辑不同，浏览器可能直接跳到终态 - 父容器宽度由 JS 动态修改（如
container.style.width = '500px'）时，会触发强制同步布局，中断动画帧 - Safari 13.1–14.0 对
flex简写过渡支持极差；iOS WebKit 在多子项同时动画时容易丢帧
真正可落地的平滑伸缩方案：用 max-width 替代 flex-grow
这是目前最稳定、无需 polyfill、且保留 Flex 布局语义的写法。关键在于：让浏览器动画一个「有明确数值起点和终点」的属性，同时不破坏弹性行为。
- 初始状态设
max-width: 0+overflow: hidden，避免内容溢出 - 激活状态设
max-width: 320px（根据设计定具体值），配合transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1) - 子元素仍保有
flex: 1，确保在未展开时能与其他兄弟项公平分配剩余空间 - 若需响应式上限，可用
max-width: min(320px, 80%)（CSS clamp() 或媒体查询 fallback）
视觉型伸缩：用 transform: scaleX() 避免重排
当伸缩只是 UI 反馈（比如点击放大导航图标），且不希望影响其他元素位置时，transform 是更轻量的选择：
- 起始：
transform: scaleX(1); transform-origin: left center; - 激活：
transform: scaleX(1.3); - 必须动态添加
will-change: transform（仅在触发前 JS 设置，动画结束后移除），否则 Safari 首帧卡顿明显 - 注意：
transform不改变文档流，文字不会换行，也不影响父容器高度，适合纯视觉反馈
如果非要硬刚 flex-grow 动画，这些细节不能漏
现代 Chrome / Edge / Firefox 支持已较好，但必须满足全部条件：
- 显式写出三值
flex，例如flex: 1 1 200px→flex: 3 1 200px，确保flex-basis固定且相同 - 禁用所有可能引起父容器重排的操作（如 JS 修改
padding、width或插入 DOM） - 避免在同一个父容器内对多个
flex-item同时触发动画 - 测试真机 Safari（尤其是 iOS 16–17），它仍会在某些 flex-wrap 场景下卡在中间帧
复杂点从来不在“能不能动”，而在于“动的时候有没有人偷偷改了父容器的 width、有没有兄弟元素在抢空间、Safari 正在后台合成哪一帧”。动效不是加个 transition 就完事，是整条渲染链路的协同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
