最稳妥的搜索框展开动画用 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 控制类名切换才可靠。
- 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，防止横屏时缩太小导致输入框难点击
padding-left 和图标定位——动画过程中如果图标用绝对定位但没设 left 基准，会在展开一半时突然偏移。这类细节不报错，但用户一眼就能感觉到“不对劲”。 
