width: 0 → width: auto 无法触发 transition，因 auto 是布局后计算的值，浏览器无法插值；推荐用 max-width 或 transform scaleX 实现平滑过渡。
直接用 width: 0 → width: auto 做 transition 是无效的——浏览器无法对 auto 插值，动画会跳变或卡死。
为什么 width: 0 → width: auto 不触发 transition
transition 只能对可计算的数值做逐帧插值。width: auto 是布局后才决定的值，CSS 引擎在动画开始前根本不知道它等于多少像素，所以干脆不动画，直接渲染最终状态。你看到的“瞬间展开”，不是 bug，是设计如此。
常见错误现象：
- 写
transition: width 0.3s+width: 0/width: auto，结果毫无过渡 - 用 JS 动态设
el.style.width = 'auto'，同样失效（style 写入覆盖了 CSS 过渡） - 搭配
display: none或visibility: hidden切换，这两者本身不可动画，transition完全不生效
用 max-width 模拟自适应宽度（推荐）
这是最可控、无需 JS、兼容性好且视觉自然的方案。核心是：让元素始终占据空间，靠 max-width 控制“可见宽度上限”，再配合 overflow: hidden 截断溢出。
立即学习“前端免费学习笔记（深入）”；
初始状态（收起）：
-
max-width: 32px（刚好容纳图标+少量 padding，不为 0） overflow: hidden-
white-space: nowrap（防文字换行撑高）
展开状态（如搜索框获得焦点）：
-
max-width: 240px（或max-width: 100%，但需确保父容器有明确宽度） - 保持
overflow: hidden，避免内容突然弹出
只对可插值属性声明 transition：transition: max-width 0.25s ease-out。不要写 all，否则 padding、border 等微小变化也会触发无关动画。
用 transform scaleX 替代 width（高性能方案）
当动画频繁或元素较多时，transform 比 width 更高效，因为它不触发重排（layout），只走合成层。
关键点：
- 用
transform: scaleX(0)→transform: scaleX(1)模拟收缩/展开 - 必须加
transform-origin: left，否则缩放中心默认在中点，会向两边拉伸 - 初始状态要设
transform: scaleX(0)+overflow: hidden，否则缩为 0 后仍可能占位或透出内容 - 不能单独依赖
scaleX控制语义宽度——它只是视觉缩放，实际布局尺寸不变，会影响点击热区和兄弟元素流式排列
示例片段：
.search-input {
transform-origin: left;
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.search-input.collapsed {
transform: scaleX(0.1);
}
.search-input.expanded {
transform: scaleX(1);
}
移动端与响应式要注意的坑
纯 width: 100% 在小屏上容易撑满整行，挤走旁边按钮；固定像素又在大屏上显得局促。更稳妥的做法是：
- 用
max-width: 240px+flex: 1（如果在 flex 容器中） - 或用
width: min(240px, 100%)，现代浏览器支持，兼顾最大限制与弹性 - 确保
padding和border在过渡前后一致，否则动画末尾会“抽搐”一下 - 触摸设备上，给收起态留至少 44px 高宽热区，方便手指点击触发
真正难的不是写几行 transition，而是判断该用 max-width 还是 transform，以及那个“足够大又不过量”的值——设小了截字，设大了动画拖沓。这个阈值得实测，别抄别人写的 500px。
