width: auto 无法直接用于 transition，因浏览器无法计算 auto 的起止值；推荐用 max-width 实现伪自适应过渡，或用 javascript 动态读取 scrollwidth 后设置 width，也可用 transform: scalex() 模拟宽度变化。
width: auto 不能直接用于 transition
直接写 transition: width 0.3s 配合 width: auto 是无效的。浏览器无法计算 auto 的数值起点和终点，导致过渡不触发或立即跳变。
用 max-width 替代 width 实现“伪自适应”过渡
这是最常用且可靠的方案：固定初始 width（如 width: 0），用 max-width 控制展开上限，并对 max-width 做过渡。内容宽度由自身决定，容器视觉上“撑开”。
- 初始状态设为
width: 0; max-width: 0; overflow: hidden; - 展开时设为
width: auto; max-width: 500px;（值需大于内容实际宽度） -
transition: max-width 0.3s ease, opacity 0.3s（加opacity可缓解文字突显感）
注意：max-width 的目标值必须足够大——如果设成 200px 但内容宽 250px，会展开到 200px 就停住，右侧被截断。
用 JavaScript 动态读取 scrollWidth 再过渡 width
当必须用 width 且内容宽度不可预估时，得靠 JS 获取真实尺寸：
立即学习“前端免费学习笔记（深入）”；
- 先设
width: 0，强制重排（offsetHeight触发） - 读取元素
scrollWidth（含 padding，不含 border） - 再设
width: ${scrollWidth}px，此时 transition 才生效
示例关键逻辑：
el.style.width = '0';<br>el.offsetHeight; // 强制 layout<br>el.style.transition = 'width 0.3s';<br>el.style.width = el.scrollWidth + 'px';注意：该方式在 flex 或 grid 容器中可能受主轴约束影响，
scrollWidth 返回值未必等于期望展开宽度。
用 transform + scale 模拟宽度过渡（无布局重排）
如果只是视觉上“变宽”，不涉及其他元素重排，可用 transform: scaleX() 配合 transform-origin: left：
- 初始
transform: scaleX(0); transform-origin: left; - 过渡
transform: scaleX(1); - 优点：GPU 加速、不触发 layout、性能好
- 缺点：内容会被横向压缩/拉伸，文本清晰度略降；若内部有绝对定位元素，需额外调整
left值
这个方案绕开了 width 计算问题，但本质是变形而非真实宽度变化——如果你的 JS 逻辑依赖 offsetWidth 或媒体查询响应，它就不可替代。
max-width 方案覆盖了八成以上需求；真要精确控制 width 过渡，JS 读取 scrollWidth 是绕不开的步骤，但务必在 DOM 稳定后执行（比如 requestAnimationFrame 里读）。 
