答案：flex-grow直接使用transition动画兼容性差，推荐用width或transform替代。具体描述：flex-grow虽为数值属性，但浏览器对其过渡支持不一致，易出现卡顿或无动画；建议通过width变化配合transition实现布局伸缩，或使用transform: scaleX()制作视觉伸展效果，后者不影响文档流；若坚持使用flex-grow动画，需确保父容器为flex布局且子元素宽度未固定，并在现代浏览器中测试验证。
在使用 CSS 的
flex-grow
属性时，很多人希望容器在伸缩过程中带有平滑的动画效果，于是自然想到用
transition
来实现。但实际开发中会发现：直接对
flex-grow
使用 transition 并不能总是如预期那样产生流畅的动画。
flex-grow 与 transition 的兼容性问题
flex-grow
是一个用于 Flex 布局中控制子元素扩展比例的属性。虽然它是一个数值型属性，理论上可以被 transition 过渡，但
浏览器
对它的动画支持并不一致，尤其在某些旧版本或特定场景下表现不佳。
常见问题
包括：
动画卡顿或跳帧
只在部分浏览器中生效（如 Chrome 可能支持较好，Safari 或 Firefox 表现异常）
初始状态和目标状态之间没有中间过渡
推荐替代方案：使用 transform 或 width 过渡
为了获得更稳定、跨浏览器兼容的伸缩动画，建议避免直接对 flex-grow 做 transition，改用可动画化的属性来模拟伸缩效果。
立即学习
“
前端免费学习笔记（深入）
”；
方法一：使用 width + transition
如果父容器是 flex 布局，可以为子项设置基于宽度的变化来模拟伸缩：
配合 JavaScript 切换类名，即可实现平滑拉伸效果，且兼容性好。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
方法二：使用 transform: scaleX()
利用 transform 动画实现视觉上的“伸展”，适合不需要影响布局流的场景：
注意：
transform 不会影响文档流
，其他元素不会随之移动，适合做视觉动画。
如果坚持使用 flex-grow 动画？
现代浏览器（Chrome、Edge、最新版 Firefox）已支持
flex-grow
的过渡动画，但需注意写法：
确保父容器设置了 display: flex，且子元素未固定宽度（如 width: auto），否则 flex-grow 不起作用，动画也无效。
基本上就这些。想要稳定动画，优先考虑 width 或 transform；若布局必须依赖 flex-grow，测试多浏览器表现后再决定是否使用其原生过渡。不复杂但容易忽略细节。
.item {
width: 100px;
transition: width 0.3s ease;
}
.item.expanded {
width: 300px;
}
.item {
transform: scaleX(1);
transition: transform 0.3s ease;
transform-origin: left;
}
.item.expanded {
transform: scaleX(3);
}
.item {
flex-grow: 1;
transition: flex-grow 0.3s ease;
}
.item.expanded {
flex-grow: 3;
}