width过渡常失效因初始值为auto导致无法插值；需显式设起始/结束值（如px）、配合overflow:hidden、避免flex干扰，或改用transform/max-height等更稳妥方案。

width 改变能触发过渡，但必须满足三个硬性条件：有明确的起始值、有明确的结束值、且两者都为可插值的数值（如 px、rem，不能是 auto 或 fit-content）。

为什么 width 过渡经常失效

最常见原因是元素初始 width 未显式声明，或被设为 auto。浏览器无法对 auto 做插值计算，transition 就直接跳变。

• 行内元素（如 ）默认 width: auto，不设 display: block 或固定宽，transition: width 无效
• Flex 容器子项若未设 flex-shrink: 0 或固定 width，宽度由内容撑开，hover 时改 width 可能被 flex 计算逻辑覆盖
• 用 max-width 替代 width 时，若起始值是 0、结束值是具体像素（如 200px），需配合 overflow: hidden 才能视觉可见过渡

transition: width 的安全写法

只在过渡明确可控的场景下使用，优先保证布局稳定性和性能可预期。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 给元素同时设置 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 声明。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！