最稳妥的搜索框展开动画用 max-width 替代 width，初始设 max-width: 40px、overflow: hidden，聚焦时设 max-width: min(320px, 80vw)，配合 js 控制 is-expanded 类、settimeout 防误收、will-change 提升性能，并注意图标定位与 padding 一致性。

搜索框默认收缩、点击后展开的常见实现方式

直接用 width 配合 transition 做展开动画，最简单但最容易出问题：初始状态设 width: 0 会导致内部文字或图标被裁切、焦点丢失，甚至触发浏览器重排异常。更稳妥的做法是用 max-width 控制伸缩范围，保留自然内容流。

• 初始状态设 max-width: 40px（刚好容下搜索图标），overflow: hidden
• 聚焦或激活时设 max-width: 320px（或根据容器留白调整）
• transition: max-width 0.3s ease-in-out，避免用 width 因为它会强制破坏内联尺寸计算
• 记得加 white-space: nowrap 防止输入框内文字换行打断动画节奏

input:focus 触发动画时的兼容性陷阱

单纯依赖 :focus 在移动端可能失效——Safari iOS 有时不触发伪类，尤其配合软键盘弹出时；Android Chrome 某些版本对快速失焦响应滞后。必须补一层 JS 控制类名切换才可靠。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• HTML 中给搜索容器加 class="search-box"，input 设 class="search-input"
• 用 addEventListener('focus', ...) 和 addEventListener('blur', ...) 切换 is-expanded 类
• CSS 写 .search-box.is-expanded .search-input 覆盖展开样式，比纯伪类更可控
• 注意：不要在 blur 立即收起，加 setTimeout(..., 150) 避免点击清空按钮时误收

transition 动画卡顿或跳变的原因

动画不流畅通常不是写法错，而是触发了非合成层渲染。width/max-width 变更本身不触发 GPU 加速，但若父容器有 transform 或 will-change，反而可能干扰布局计算。

• 确保搜索框父容器没有 overflow: hidden 且高度固定，否则 max-width 动画会连带引发重排
• 避免同时过渡 padding 或 border，它们和 max-width 不同步会导致视觉撕裂
• 真要提升性能，可在展开后给 input 加 style="will-change: width"，但仅限展开态，收起后移除
• 测试时用 Chrome DevTools 的 Rendering 面板勾选 “Paint flashing”，看是否整行重绘

适配不同屏幕宽度的断点处理

PC 上展开到 320px 合理，但在小屏上占满宽度反而更友好。不能只靠媒体查询硬切，得让动画本身适应容器。

• 把 max-width 改成 max-width: min(320px, 80vw)（现代浏览器支持）
• 旧浏览器降级方案：用 JS 监听 window.matchMedia，动态改 style.maxWidth
• 别用 % 值做 transition，百分比基于父容器实时计算，动画中父宽微变就会抖动
• 移动端建议加 min-width: 200px，防止横屏时缩太小导致输入框难点击

实际最易忽略的是 input 的 padding-left 和图标定位——动画过程中如果图标用绝对定位但没设 left 基准，会在展开一半时突然偏移。这类细节不报错，但用户一眼就能感觉到“不对劲”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！