flex-basis动画失效的根本原因是布局未进入Flex流程，需确保父容器启用display: flex且flex-direction正确，子项无width、flex简写覆盖，并显式声明同单位初始值与目标值，加min-width: 0防内容撑开。
直接改 flex-basis 没反应？不是 JS 写错了，而是布局根本没走 Flex 流程。必须先确认父容器真启用了 Flex 布局，且单位一致、没被其他样式覆盖。
为什么 flex-basis 动画失效
常见现象：JS 设置了 element.style.flexBasis = '64px'，或切换了 .sidebar-collapsed 类，但宽度纹丝不动，或突变跳变。
- 父容器缺
display: flex或flex-direction: row——flex-basis在非 Flex 容器里是无效属性 - 侧边栏自己写了
width（比如width: 240px）——它会直接覆盖flex-basis - 用了
flex: 1或flex: auto这类简写 —— 它们会把flex-basis重置为auto或0% - 初始值是
auto，目标值是64px—— 浏览器无法插值，动画必然跳变
怎么让 flex-basis 动画真正平滑
关键不是“能不能动”，而是“怎么动才不崩”。浏览器只对可插值的单位做中间帧计算，必须显式声明、单位统一、解除内容撑开限制。
- 初始状态必须写死：
.sidebar { flex-basis: 240px; }，不能留空或依赖默认auto - 折叠态用同单位数值：
.sidebar-collapsed { flex-basis: 64px; }，禁用content、fit-content等不可计算值 - 加
min-width: 0—— 否则内部长文本、图标容器会强制撑宽，flex-basis再小也压不住 - 配套
overflow-x: hidden+white-space: nowrap+text-overflow: ellipsis控制文字截断 - 过渡只写
flex-basis，别混进width或transform—— 多属性同时动容易不同步，尤其在 Safari 里
主内容区为什么错位或留白
flex: 1 在 flex-direction: row 下控制宽度没问题，但侧边栏收缩后，主内容区可能因内容撑开或未设收缩策略而溢出、留白甚至换行。
立即学习“前端免费学习笔记（深入）”；
- 更稳写法是：
flex: 1 1 0（即flex-grow: 1、flex-shrink: 1、flex-basis: 0） - 主内容区也得加
min-width: 0，防止内部长 URL 或表格撑破布局 - 若内容里有
<pre>或固定宽表格，额外加overflow-x: auto - 别让侧边栏设
flex-shrink: 0，否则它不缩，主内容区就永远“算不准”剩余空间
折叠动画该不该用 flex-direction
flex-direction 不支持 CSS transition，写 transition: flex-direction 0.3s 完全无效，只会浪费调试时间。所谓“卡顿”，其实是布局重排瞬间完成的视觉跳变，不是性能问题。
真正可用的动画路径只有三条：flex-basis（需单位一致）、max-width（配合 overflow-hidden）、transform: translateX()（不脱离文档流，性能最优）。选哪条，取决于你是否需要主内容区自动重排 —— 如果要，就别用 translateX；如果只是视觉收起且主区已占满，translateX 是最稳的。
