flex子元素width/height过渡失效的直接原因是其初始计算值为auto，无法与具体数值插值；解决方法是显式设置min-width/min-height配合width/height，或改用transform替代。
flex子元素width/height过渡失效的直接原因
根本不是transition写错了，而是flex容器默认会覆盖子元素的尺寸声明——width和height在flex item上被设为auto（除非显式指定），而auto → 具体值无法插值，浏览器直接跳变。
常见现象：hover时width: 100px → 200px没动画，或JS改style.width后瞬间完成，毫无过渡感。
- flex item的
width初始计算值是auto，哪怕你写了width: 100px，也可能被flex: 1或flex-grow覆盖 -
transition: width 0.3s本身有效，但起始值不可知，过渡链断裂 - 用开发者工具看Computed面板里的
width，大概率显示auto而非像素值
为什么min-width/min-height能修复
min-width和min-height不参与flex收缩/拉伸逻辑，它们始终保留原始声明值，且是可过渡属性。设了min-width后，浏览器能明确拿到起始像素值，width变化才真正可插值。
- 必须同时设置
min-width和width：例如min-width: 100px; width: 100px;，再hover到width: 200px - 若只设
min-width不设width，width仍为auto，无效 - 对高度同理：
min-height: 2rem; height: 2rem;，再过渡height - 注意：
min-width不能设为0（部分浏览器解析异常），建议用0.01px或1px
更稳妥的替代方案：用transform替代width/height
如果只是做展开、缩放类动效，transform: scaleX()或scaleY()比改width/height更可靠——它不触发重排，且不受flex布局干扰。
-
transform天然支持过渡，无需min-前缀兜底 - 示例：
transform: scaleX(1); transition: transform 0.3s ease;→ hover时transform: scaleX(1.5) - 需配合
transform-origin控制缩放基点，比如transform-origin: left center让元素从左向右展开 - 注意：
transform不影响文档流，若需要占位变化，得额外处理父容器或用scaleX()+overflow: hidden
检查transition是否真生效的实操步骤
别只信Styles面板里写的那行transition，得去Computed里确认它是否“落地”。
- 打开DevTools → Elements → 选中元素 → 切到Computed标签页
- 搜索
transition-property，确认值不是none；搜索transition-duration，确认不是0s - 如果其中一项是
none，大概率是更高优先级CSS重置了它，比如某个全局样式写了* { transition: none !important; } - 临时禁用所有外部CSS（Elements → Styles → 点击CSS文件名前的复选框），只留你的规则，看Computed是否恢复
- 移动端注意：某些安卓WebView对
width过渡支持极差，transform是唯一稳定选择
过渡失效最常卡在“起始值不可知”这个环节，flex布局下尤其明显。与其反复调transition参数，不如先盯死Computed里的width和min-width值——它们是不是你预期的数字，比什么都重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
