flex项目transition失效的根本原因是浏览器无法获取可插值的起点值：width/height常为auto、flex-grow无连续数值路径，且transition需定义在基础选择器而非:hover中，js操作时应避免移除含transition的类。
Flex项目无法触发transition，不是因为写法错了，而是浏览器压根没拿到可插值的起点——width、height、flex-grow这些属性在flex上下文中常被计算为auto或参与布局分配，根本无法生成中间帧。
为什么width/height在flex子项里“动不了”
flex item的width初始值大概率是auto（哪怕你写了width: 200px，也可能被flex: 1覆盖）。而auto → 200px不可插值，浏览器直接跳变。
- 打开DevTools → Computed面板，搜索
width，确认它显示的是具体像素值，而不是auto - 必须同时设置
min-width: 200px和width: 200px（高度同理），min-width不参与flex拉伸，能锚定起始值 - 避免
min-width: 0，部分浏览器解析异常；改用min-width: 0.01px或1px - 更优解：用
transform: scaleX(1)替代width，不触发重排，也不受flex尺寸逻辑干扰
为什么flex-grow加了transition还是跳变
flex-grow本身不是像素可映射属性，它只在layout阶段参与计算，没有连续数值路径供过渡引擎插值。Chrome 84+ 声称支持，但仅在特定组合下勉强可用；Safari 14.0及更早版本基本无效。
- 唯一稳定方案是使用
flex简写，并确保起止状态的flex-basis类型一致：都用px，或都用%，绝不混用auto和数字 - ✅ 正确：
flex: 1 1 200px→flex: 3 1 200px - ❌ 错误：
flex: 1→flex: 3（后者等价于flex: 3 1 0，flex-basis: 0与前者隐式值不等价） - 显式写出三值：
flex: 3 1 200px，避免flex-shrink被意外设为0
为什么transition只在hover时生效、移开就“啪”一下回弹
这是最常被忽略的配置错误：transition被写进了:hover规则里，而不是基础选择器中。一旦离开伪类，过渡声明就消失了。
- ❌ 错误写法：
.btn:hover { transform: scale(1.2); transition: transform 0.3s; } - ✅ 正确写法：
.btn { transform: scale(1); transition: transform 0.3s; }+.btn:hover { transform: scale(1.2); } - 务必去Computed面板验证
transition-property和transition-duration是否始终存在，且非none或0s - 检查是否有全局样式如
* { transition: none !important; }覆盖了你的规则
JS切换class后transition完全失效怎么办
调用classList.remove("active")再classList.add("expanded")，会导致transition声明随类一起消失。浏览器失去起始值，只能硬切终态。
- 把
transition抽到一个永不被移除的基础类中，例如.flex-item-animatable { transition: transform 0.35s, width 0.35s; } - 状态类只管值：
.flex-item-animatable--wide { width: 300px; }，不带transition - 别在JS里直接写
el.style.width = "300px"，这会覆盖CSS中的transition声明 - 若需JS控制动画启停，用
el.style.transition = "none"临时禁用，但之后要手动补终态并触发回调逻辑
真正难处理的不是语法，而是浏览器在 layout、paint、composite 三阶段之间的权衡——flex 布局本身就是 layout 阶段的产物，而 transition 要想平滑，就得尽量绕开 layout。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
