通过:focus触发width动画经常失效，根源在于auto或100%无法被浏览器插值计算；必须使用固定尺寸、将transition写在默认状态、配合overflow:hidden与box-sizing:border-box，同时在移动端依赖JavaScript补位并防范布局重排。
如果仅依赖 :focus 来驱动 width 动画，绝大多数情况下都无法生效。问题并非代码写错，而是浏览器根本无从进行插值——它缺少可计算的初始值。
为何 :focus 搭配 width 往往没有动画
浏览器在对 width 执行过渡时，要求起始值与结束值都必须是可计算、可插值的明确长度单位。然而很多开发者习惯这样写：
input { width: auto; transition: width 0.3s; }input:focus { width: 240px; }
瓶颈在于 auto 并非数值，浏览器会跳过过渡直接渲染到最终状态。即便改用 100% 作为起点，一旦父容器尺寸变化，起始值就会浮动，插值依然失败。
- 初始
width必须使用具体单位：例如48px、3rem，绝不能是auto或100% transition应写在元素的默认状态（而非:focus里），否则首次聚焦时动画不会触发- 在 flex 布局中不要同时使用
width与flex属性，否则min-width或flex-shrink可能强行截断动画
正确实现动画：固定初始宽度 + overflow: hidden
收起状态并非“消失”，而是“仅显示图标”。核心不是压缩宽度，而是控制可视范围：
- 为
input设置初始width: 48px（刚好容纳搜索图标并留出内边距） - 添加
overflow: hidden，防止文字与光标溢出 - 聚焦时将
width设为220px，同时减小padding-left使文字左移，视觉更加流畅 - 务必声明
box-sizing: border-box，否则边框和内边距会额外撑大元素尺寸
示例 CSS：
input.search-input { width: 48px; padding: 8px 12px 8px 36px; overflow: hidden; box-sizing: border-box; transition: width 0.25s ease, padding-left 0.25s ease;}input.search-input:focus { width: 220px; padding-left: 12px;}
移动端 :focus 失效？需要 JavaScript 辅助
iOS Safari 在软键盘弹出后经常不触发 :focus，Android Chrome 对快速失焦的响应也存在延迟。纯 CSS 方案在移动端并不可靠。
- 在 HTML 中为
input添加 classsearch-input，外层包裹div.search-wrapper - 通过 JavaScript 监听
focus与blur事件，切换is-expanded类：element.classList.add('is-expanded') blur时不要立即收起，使用setTimeout(() => ..., 150)延迟执行，避免点击清除按钮时误触收起- CSS 中用
.search-wrapper.is-expanded .search-input覆盖展开样式，这种方式比伪类更可控
width 动画卡顿或跳变的深层原因
并非过渡时间设置过短，而是触发了非合成层渲染或布局重排。
- 若父容器设置了
overflow: hidden且高度固定，max-width动画会连带引发重排——width也不例外 - 避免同时过渡
padding与border，它们与width的渲染节奏不同步，容易导致视觉撕裂 - 如需提升性能，可在聚焦瞬间动态添加
style="will-change: width"，失去焦点后立即移除；长期保留会拖慢页面 - 确保输入框字体大小 ≥ 16px，iOS Safari 对小字号有强制缩放机制，会导致伸缩错位
最容易被忽略的一点是：动画是否平滑，往往取决于父容器的 display 类型与 flex 行为，而非 input 自身 transition 写得有多漂亮。
