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() 模拟宽度拉伸
适合纯视觉拉伸、不希望影响文档流的场景（比如下拉菜单项的横向展开动效）：
立即学习“前端免费学习笔记（深入）”；
- 起始写
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-widthfallback
真正难的不是选哪种方案，而是判断“这个容器是否真的需要宽度动画”——很多所谓“展开”其实只需高度过渡或 opacity + transform，强行套 width 动画反而增加复杂度和兼容风险。
