width过渡常失效因初始值为auto导致无法插值；需显式设起始/结束值（如px）、配合overflow:hidden、避免flex干扰，或改用transform/max-height等更稳妥方案。
width 改变能触发过渡，但必须满足三个硬性条件：有明确的起始值、有明确的结束值、且两者都为可插值的数值（如 px、rem，不能是 auto 或 fit-content）。
为什么 width 过渡经常失效
最常见原因是元素初始 width 未显式声明，或被设为 auto。浏览器无法对 auto 做插值计算，transition 就直接跳变。
- 行内元素（如
<a></a>）默认width: auto，不设display: block或固定宽，transition: width无效 - Flex 容器子项若未设
flex-shrink: 0或固定width，宽度由内容撑开，hover 时改width可能被 flex 计算逻辑覆盖 - 用
max-width替代width时，若起始值是0、结束值是具体像素（如200px），需配合overflow: hidden才能视觉可见过渡
transition: width 的安全写法
只在过渡明确可控的场景下使用，优先保证布局稳定性和性能可预期。
- 给元素同时设置
width和min-width（如width: 64px; min-width: 64px;），避免 flex 或百分比布局干扰 - 过渡目标值也必须是具体数值，例如
.active { width: 160px; }，不能写width: fit-content或width: max-content - 推荐搭配
overflow: hidden和white-space: nowrap，防止文字换行破坏宽度变化节奏 - 时长控制在
0.2s–0.3s，过长会拖慢交互反馈；缓动用cubic-bezier(0.25, 0.8, 0.25, 1)比ease-in-out更自然
比 width 更稳妥的替代方案
如果只是想实现“展开/收起”类效果，width 不是唯一选择，甚至不是最优解。
立即学习“前端免费学习笔记（深入）”；
- 用
transform: scaleX()+transform-origin: left模拟宽度变化：不触发重排，GPU 加速，性能更好 - 用
max-height过渡替代height：设起始max-height: 0、结束max-height: 300px，配合overflow: hidden - 导航按钮类场景，直接用
flex+min-width+flex-grow控制伸缩，比硬调width更健壮
真正难的不是写对那行 transition: width 0.25s，而是判断当前布局是否允许它稳定生效——很多“失效”，其实是父容器的 display、flex 或 position 在暗中覆盖了你的 width 声明。
