HTML+CSS实现搜索框展开动效：width过渡与focus

通过: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 添加 class search-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 写得有多漂亮。