如果你曾经尝试过给一个 Flex 容器里的某个项目添加 transition: flex-basis 0.3s，然后期待它像普通宽度一样平滑展开，结果很可能是页面毫无反应，或者项目瞬间跳到了目标尺寸。这背后并不是浏览器出了 bug，而是 Flexbox 的尺寸计算机制决定了某些属性天生就不适合做过渡动画。要解决这个问题，首先要弄清楚 Flex 项目在伸缩过程中到底哪些值在变化，哪些能被 animation 系统捕获。
从规范角度看，CSS 过渡只对可动画的属性生效。flex-grow、flex-shrink 作为数值型属性，理论上它们属于可动画类型，但实际渲染时它们并不直接映射为像素尺寸，而是作为比例系数参与剩余空间分配。这种分配计算发生在布局阶段，过渡系统无法对布局结果进行插值。换句话说，改变 flex-grow 的瞬间，浏览器会重新计算整个 Flex 容器的空间分布，项目宽度从一个值跳到另一个值，中间没有可插值的像素状态。这也是为什么很多开发者尝试过渡 flex-grow 或 flex-shrink 却看不到动画的根本原因。
常见的误区：直接过渡 flex-basis 或 flex-grow
先来看一段最容易写出但无效的代码。假设有一个水平方向 Flex 容器，左侧是侧边栏，右侧是主内容区，我们希望点击按钮后侧边栏从 200px 平滑收缩到 80px。直觉写法可能类似这样：给侧边栏设置 flex: 0 0 200px，然后改变 flex-basis 并添加 transition。
.sidebar {
flex: 0 0 200px;
transition: flex-basis 0.3s ease;
}
.sidebar.collapsed {
flex-basis: 80px;
}
这段代码在多数浏览器中不会产生动画。原因在于 flex-basis 虽然是可动画属性，但它的过渡过程依赖于布局引擎计算出每一帧的中间值。然而 Flex 布局在计算 flex-basis 时还会受到 width、min-width、max-width 以及内容最小尺寸等因素影响。当 flex-shrink 为 0 时，flex-basis 的最终使用值会直接变成 80px 或 200px，中间状态无法被 CSS 过渡引擎生成。即使把 flex-shrink 设为 1，浏览器也只会在重新布局后得出新的尺寸，仍然没有逐帧过渡。
另一个常见尝试是过渡 flex-grow。例如两个项目，第一个占据剩余空间的比例从 1 变为 3。代码写起来很自然，但结果同样没有平滑动画。因为 flex-grow 参与的是剩余空间分配，这个分配过程不是线性的像素插值，过渡系统无法介入。所以正确思路是绕开这些布局阶段动态计算的属性，改用浏览器能够逐帧渲染的常规 CSS 属性来模拟长度变化。
用可动画属性模拟：width、max-width 与 transform
第一种可靠方案是直接使用 width 或 max-width。虽然我们不希望手动设置固定宽度导致失去弹性，但在很多场景下，可以将 flex-basis 设为 auto，然后通过滚动改变 width 来实现动画。例如侧边栏使用 width: 200px，收缩时改成 width: 80px，同时保持 flex-shrink 为 0 避免被压缩。这样 transition 就能正常工作。
.sidebar {
flex: 0 0 auto;
width: 200px;
transition: width 0.3s ease;
}
.sidebar.collapsed {
width: 80px;
}
这种做法的优点是代码简单直观，动画非常流畅。缺点在于如果侧边栏内部内容较多，收缩到 80px 时可能导致内容溢出或换行混乱，需要配合 overflow: hidden 来保证视觉整洁。另外，当需要响应式设计时，宽度写死会让 Flex 布局失去自动分配的优势，所以适合侧边栏这类固定尺寸可预测的组件。
如果不想影响布局流中的实际尺寸，可以使用 transform: scaleX() 来做视觉上的长度变化。但要注意 scaleX 不会改变元素在布局中占用的空间，它只是视觉上的缩放。所以适用于那种不需要重新排列相邻元素的场景，比如某个装饰条或独立面板的展开效果。对于侧边栏这种需要挤压或释放空间的布局，scaleX 会导致元素视觉上变小但空白区域仍然占据原来的位置，不符合预期。因此 transform 方案更适合纯展示性的长度变化，而不是真正的布局尺寸调整。
还有 max-width 的过渡技巧。如果把元素的 max-width 从 200px 过渡到 80px，同时 width 设置为 100%，当 max-width 限制生效时，元素实际宽度会跟随 max-width 变化，从而产生动画。这种方案在需要元素自适应父容器且设置最大宽度时非常实用。代码示例：
.panel {
width: 100%;
max-width: 200px;
transition: max-width 0.3s ease;
overflow: hidden;
}
.panel.collapsed {
max-width: 80px;
}
这段代码使得面板在展开时最大 200px，收缩时最大 80px，同时宽度尽量填满。过渡过程中每帧的 max-width 值都能被插值，从而驱动实际渲染宽度平滑变化。这个技巧在移动端侧滑栏或卡片折叠中经常用到。
利用 flex-grow 配合 flex-basis:0 实现比例伸缩动画
如果希望保持 Flex 布局的弹性分配特性，同时又能有动画效果，可以考虑把 flex-basis 设为 0，然后通过改变 flex-grow 的值来模拟长度变化。虽然前面说过 flex-grow 本身无法过渡，但我们可以利用 CSS 自定义属性与 @property 注册，让 flex-grow 成为一个可以通过过渡系统插值的数值属性。具体做法是先注册自定义属性为 number 类型，然后将其用于 flex-grow，再对自定义属性做 transition。
@property --grow {
syntax: '<number>';
inherits: false;
initial-value: 1;
}
.item {
flex-basis: 0;
flex-grow: var(--grow);
transition: --grow 0.3s ease;
}
.item.shrink {
--grow: 0.2;
}
这段代码的原理是：@property 允许自定义属性指定类型为 number，这样浏览器就知道如何对其值进行数值插值。过渡系统会在 0.2 到 1 之间生成中间数值，每一步都会重新触发 flex-grow 的布局计算，但因为 flex-basis 为 0，剩余空间的分配比例是连续变化的，所以视觉上产生了平滑的长度变化。这种方案完美保留了 Flex 的弹性分配能力，同时实现了动画。但需要注意的是，@property 在早期浏览器版本中支持度有限，生产环境使用时建议做渐进增强，并准备好无动画的降级方案。
另一种不需要 @property 的方案是通过 CSS 动画关键帧来改变 flex-grow。因为 keyframes 动画可以使用动画插值，所以定义一个从 flex-grow: 1 到 flex-grow: 0.2 的动画，同样可以看到连续变化。不过这种方式适合一次性动画，无法通过简单的 class 切换来控制方向，双向过渡需要定义两套动画。如果项目需要频繁往返切换，使用 @property 或 JS 动态修改内联样式会更灵活。
进阶：使用 ResizeObserver 配合 JavaScript 精确控制
当上述纯 CSS 方案都无法满足需求时，尤其是需要根据内容动态测量宽度再执行动画的场景，可以使用 ResizeObserver 与 JavaScript 配合。核心思想是：先让 Flex 项目自然布局，用 ResizeObserver 监听其实际渲染宽度，再通过 requestAnimationFrame 逐帧调整目标样式，从而实现高度定制化的过渡。例如，某个侧边栏需要根据内部数据异步加载的结果动态改变宽度，且要求有弹性动画，我们可以先设置一个占位宽度，加载完成后测量理想宽度，再用 JS 驱动过渡。
const sidebar = document.querySelector('.sidebar');
let targetWidth = 200;
function animateWidth(nextWidth) {
const startWidth = sidebar.getBoundingClientRect().width;
const startTime = performance.now();
const duration = 300;
function step(now) {
const progress = Math.min((now - startTime) / duration, 1);
const current = startWidth + (nextWidth - startWidth) * progress;
sidebar.style.width = current + 'px';
sidebar.style.flexBasis = 'auto';
if (progress < 1) {
requestAnimationFrame(step);
}
}
requestAnimationFrame(step);
}
// 当需要改变宽度时调用
document.querySelector('#toggleBtn').addEventListener('click', () => {
const current = sidebar.getBoundingClientRect().width;
animateWidth(current > 120 ? 80 : 200);
});
这种方案的优势在于完全绕开了 CSS 过渡的限制，可以精确控制每一帧，甚至加入缓动函数。但需要手动处理动画状态、取消冲突的动画，以及响应 ResizeObserver 的循环。实际项目中，如果只是简单的展开折叠，CSS 方案足够；如果涉及复杂的动态测量或动画队列，JS 驱动是更稳妥的选择。
使用 ResizeObserver 时还要注意，直接修改 width 可能会和 Flex 的 flex-grow 冲突。为了确保手动设置的宽度生效，需要同时将 flex-grow 设为 0，并且 flex-basis 设为 auto 或者动态更新 flex-basis。否则浏览器会在下一帧根据 flex 规则重新计算宽度，覆盖掉 JS 设置的 width。一个推荐的做法是在动画期间临时将目标元素的 flex: none 应用到内联样式，动画结束后再恢复之前的 Flex 属性。
总结与选型建议
回顾下来，Flexbox 中实现长度变化过渡动画没有银弹，需要根据具体场景权衡。如果元素尺寸固定且变化范围已知，优先使用 width 或 max-width 过渡，代码最少且兼容性最好。如果要求保留弹性分配特性，可以使用 @property 注册自定义属性来过渡 flex-grow，现代浏览器中体验很好。对于需要精确测量和动态计算的复杂交互，结合 ResizeObserver 与 requestAnimationFrame 手动驱动动画是最可控的方案。
在实际开发中，很多开发者会陷入“必须使用 Flexbox 属性完成所有布局”的思维定式，导致在需要动画时束手无策。其实 Flexbox 只是布局工具，动画完全可以交给其他属性来承担。理解这一点之后，Flexbox 中的长度过渡就不会再成为困扰。希望本文提供的几种思路能帮你快速找到适合自己的实现方式。