首页 > 网页制作 >利用HTML+CSS制作搜索框展开动效：width过渡与focus

利用HTML+CSS制作搜索框展开动效：width过渡与focus

来源：互联网 2026-06-19 08:29:12

:focus触发width动画常因auto或100%不可插值而失效，需用确定尺寸、transition写在默认态、配合overflow:hidden和box-sizing:border-box实现平滑过渡。移动端:focus可能不触发，需用JS监听focus/blur并切换类名。避免同时过渡padding和border导致重排，父容器flex行为影响动画流畅

:focus触发width动画常失效，因为auto/100%不可插值；必须用确定尺寸、transition写在默认态、配合overflow:hidden和box-sizing:border-box，并注意移动端需JS补位及避免布局重排。

单纯依靠 :focus 触发 width 动画，绝大多数情况下都无法生效。问题不在于写法错误，而在于浏览器无法进行插值计算——它无法确定动画的起始基准。

长期稳定更新的攒劲资源： >>>点此立即查看<<<

:focus与width动画失效的根源

浏览器对 width 执行过渡动画时，要求起始值和结束值均为可计算、可插值的确定尺寸。然而许多开发者的常见写法如下：

input { width: auto; transition: width 0.3s; }input:focus { width: 240px; }

问题核心在于 auto 并非数值单位，浏览器会跳过过渡过程直接渲染最终状态。即便使用 100% 作为起始值，父容器宽度一旦变化，起始值即产生浮动，插值同样失败。

CSS width过渡的正确写法要点

起始 width 必须使用明确单位：例如 48px、3rem，禁止使用 auto 或 100%
transition 必须定义在默认状态（非 :focus 内），否则首次聚焦时动画无法触发
避免在 flex 容器中混用 width 与 flex 属性，min-width 或 flex-shrink 可能截断动画

有效的CSS width动画实现方案：初始宽度与overflow:hidden

收起状态并非让元素消失，而是仅显示图标区域。关键不在于压缩宽度，而在于控制可见范围：

为 input 设置初始 width: 48px（足以容纳搜索图标及适当内边距）
添加 overflow: hidden，防止文字和光标溢出可见区域
聚焦时设置 width: 220px，同时调整 padding-left 使文字左移，视觉过渡更自然
必须声明 box-sizing: border-box，避免边框和内边距额外撑宽元素

CSS width过渡动画示例代码

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 方案在此场景下不可靠。

JS补位实现步骤

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 覆盖展开样式，比伪类控制更稳定