flex-grow本身不支持插值动画，因其为非像素型布局权重系数，无法生成中间帧；应改用width、flex-basis或transform: scalex()等可动画属性实现平滑伸缩。

flex-grow 本身不支持插值动画

浏览器无法对 flex-grow 做中间状态计算，因为它不是像素值，而是参与运行时布局分配的权重系数。你写 transition: flex-grow 0.3s，实际没有任何动画效果——Chrome 可能略显响应，Safari 和 Firefox 大概率直接跳变，且 DevTools 的 Rendering 面板里看不到任何帧间过渡。

flex-grow 触发同步重排（layout thrashing）

每次 flex-grow 变化，浏览器都得重新走一遍 Flex 布局算法：计算所有子项的 flex-basis、剩余空间、收缩/扩张比例……这个过程强制触发 layout，无法进 GPU 合成层。尤其在 resize 或滚动中动态改它，极易卡顿掉帧。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 不要在 resize 回调里直接改 element.style.flexGrow
• 避免和 getBoundingClientRect()、offsetWidth 等同步读取 API 混用
• 即使只改一个元素，也可能连带重排整个 flex 容器及其后代

真正可动画的替代属性有哪些

想实现“视觉上伸缩”，必须换到浏览器原生支持插值和硬件加速的属性：

• width 或 max-width：需配合 box-sizing: border-box，设具体数值（如 width: 120px → 320px），兼容性最好
• flex-basis：比 flex-grow 更靠谱，但必须带单位（flex-basis: 100px，不能只写 0），且要显式声明 transition: flex-basis 0.3s
• transform: scaleX()：最顺滑，不影响文档流，但需加 transform-origin: left center 锚定起点，并在 JS 激活前动态加 will-change: transform，结束后立刻移除

移动端和旧浏览器的额外陷阱

在 iOS Safari 或 Android WebView 中，哪怕你用了 transform，也容易因隐式退化失效：

• 父容器有 overflow: hidden 或 filter，会抑制子元素提层
• 动画中同时改了 border-radius 或 box-shadow，整层退回 CPU 渲染
• 写了 will-change: transform 却没清理，低端机内存溢出风险升高
• 媒体查询切换断点时，若没用 requestAnimationFrame 延迟加动画 class，layout 还没完就动了，照样卡

真正卡顿的根源从来不是“浏览器性能差”，而是你让动画属性反复撞在 layout 这堵墙上。选对可动画属性只是第一步，后续每一处 DOM 操作、样式读取、图层管理，都在悄悄决定动画是否能跑满 60fps。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！