flex-basis设auto无法过渡，因auto不可插值；需用0px等绝对值并配合强制重排、getcomputedstyle读取实际值来实现动画。
flex-basis 直接设 auto 无法过渡，不是写法错，是浏览器根本没法插值 —— 它压根不支持从 auto 到具体尺寸的动画。
为什么 flex-basis: auto 过渡静默失效
浏览器对 flex-basis 的过渡要求很硬：起始值和结束值都得是可计算、可插值的绝对长度（比如 0px、200px）。auto 是一个“计算后才知结果”的状态，不是固定值，所以 transition: flex-basis 0.3s 遇到 auto → 200px 就直接跳过，不报错、不动画、也不警告。
常见现象：.item { flex-basis: auto; transition: flex-basis 0.25s; } + .item.expanded { flex-basis: 200px; }，加类后元素瞬间变宽，毫无过渡。
- 别信默认值 —— 增删前用
getComputedStyle(item).flexBasis读出当前值（通常是0px或具体像素） - 避免在
@keyframes里驱动flex-basis，CSS 动画同样不支持该属性的动态路径 - 若内容高度不固定，
flex-basis不适合单独控制“高度方向”动画，此时优先考虑max-height或 FLIP
插入新项时如何让 flex-basis 过渡生效
关键不是“加完再动画”，而是“先锁视觉、再切目标”。JS 插入后立刻强制重排，把浏览器拉回可控节奏。
- 插入节点后，立即设
item.style.flexBasis = '0px'+item.style.opacity = '0' - 紧接着触发同步布局读取：
item.offsetHeight（或getBoundingClientRect()），迫使浏览器计算当前状态 - 立刻改回目标值：
item.style.flexBasis = '200px'+item.style.opacity = '1'，并确保已声明transition: flex-basis 0.25s ease, opacity 0.25s ease - 不要用
innerHTML +=拼接，它会销毁旧节点、重置所有样式和过渡状态；改用document.createElement+appendChild
删除项时用 flex-basis 收缩的坑与绕过方案
单纯靠 flex-basis 删除动画风险高：收缩到 0px 后，DOM 移除太急会导致动画被截断；且若列表项内有 flex: 1 子容器，flex-basis: 0 可能干扰其伸缩逻辑。
- 更稳的做法是组合使用：
flex-basis控制主轴展开/收窄，max-height或transform: scaleY(0)处理垂直方向收起 - 删除前加标记类（如
.removing），设flex-basis: 0+max-height: 0+opacity: 0+overflow: hidden - 监听
transitionend，但必须校验e.propertyName === 'flex-basis'或'max-height'，再执行el.remove() - 若列表项高度差异大，
max-height统一设为安全上限（如200px），避免短项动画拖沓
比 max-height 更贴合 Flex 布局的真正优势点
用 flex-basis 替代 max-height 不是为了炫技，而是因为它天然参与 flex 剩余空间分配 —— 尤其当列表项本身是 flex 容器子项时，行为更可预测。
- 当列表项内含
flex: 1子元素，max-height会强行截断其伸缩，而flex-basis与之共存无冲突 - 字体缩放或行高变化时，
max-height: 500px容易裁剪内容；flex-basis虽不能自动适配，但配合 JS 动态读取scrollHeight后设值，更可控 - 多个项同时展开时，
max-height每个都要单独算上限；flex-basis只需统一初始0px+ 目标值，由 flex 自动对齐剩余空间
真正难的不是写对 transition，而是每次 DOM 变更后，你是否还清楚当前项的 flex-basis 实际值是多少 —— 浏览器不会告诉你，得你自己拿 getComputedStyle 去问。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
