width: auto 无法参与 CSS 过渡，因其非数值、需重排计算；应改用 max-width + overflow: hidden 或 transform: scaleX() 等可插值方案。

直接用 width: auto 做过渡会完全失效——浏览器无法对 auto 插值，动画只会跳变。必须绕过 width 本身，改用可插值的属性或布局机制。

为什么 width: 0 → width: auto 过渡不生效

CSS 的 transition 只能对确定数值（如 120px、50%）做线性插值。auto 不是数值，而是计算指令，浏览器在每一帧都得重新 layout 才能知道“它该多宽”，根本没法生成中间态。

• 常见错误现象：鼠标悬停或点击后，元素瞬间弹出，毫无过渡感
• 即使写了 transition: width 0.3s，只要终点是 width: auto，Chrome/Firefox/Safari 全部忽略动画
• transition: all 0.3s 同样无效，且可能意外触发动画其他属性（比如 margin 或 color）

用 max-width 替代 width 的实操要点

这是最通用、兼容性最好的方案，但关键不在“设多大”，而在“怎么设”：

• 起始状态必须是 max-width: 0 + overflow: hidden（缺一不可）
• 结束状态的 max-width 值要 ≥ 内容实际宽度；避免硬写 9999px，低端设备收起时会有明显拖尾感
• 若内容动态变化（如 JS 插入文字），需在展开前用 el.scrollHeight 读高并赋值，否则动画会卡顿或截断
• 必须确保 overflow: hidden 同时存在于初始类和展开类中——只写在展开类里，初始状态内容仍会溢出

用 transform: scaleX() 模拟宽度拉伸

适合纯视觉拉伸、不希望影响文档流的场景（比如下拉菜单项的横向展开动效）：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• 起始写 transform: scaleX(0)，结束写 transform: scaleX(1)，搭配 transform-origin: left
• 性能远优于 width/max-width，走 GPU 加速，无重排
• ⚠️ 注意：它不改变元素实际占用空间，兄弟元素不会被推开；若需布局响应，不能单独依赖此方案
• 如果容器内有 position: absolute 子元素，它们会随 scale 缩放，可能需要额外 transform: scaleX(1) 覆盖还原

现代方案：interpolate-size: allow-keywords 还不成熟

Chrome 129+ 支持该属性实现 width: 0 → width: auto 插值，但截至 2026 年 10 月：

• Safari 和 Firefox 完全不支持，且无明确落地时间表
• 必须写在父容器上，不是目标元素本身（很多人加错位置导致失效）
• 仍需配合显式 transition: width 和 overflow: hidden，缺一不可
• 实际项目中建议仅作渐进增强，主逻辑仍走 max-width fallback

真正难的不是选哪种方案，而是判断“这个容器是否真的需要宽度动画”——很多所谓“展开”其实只需高度过渡或 opacity + transform，强行套 width 动画反而增加复杂度和兼容风险。

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