应使用 overflow: hidden 配合非零初始宽度（如 32px）和过渡到完整宽度（如 240px），配合 class 切换、正确 transition 声明及热区优化，确保搜索框始终可聚焦且动画平滑。
搜索框默认收起时 width 为 0，点击后展开到固定宽度
直接设 width: 0 再用 transition 动画展开，浏览器会“卡住”——因为 width: 0 时内部文字、padding、border 全被压扁，transition 无法平滑插值。更稳妥的做法是让元素始终占据布局空间，但视觉上“隐藏”：
- 用
overflow: hidden配合一个非零的初始width（比如width: 32px），只显示图标 - 点击后过渡到完整宽度（如
width: 240px），同时保证padding和border不突变 - 避免对
display: none或visibility: hidden做transition，它们不触发重排动画
transition 必须写在 width 变化的元素本身，且不能省略单位
transition: width 0.3s ease 要写在搜索框的 CSS 规则里，而不是父容器；否则样式不会作用到 width 上。常见错误是漏掉单位或写成 width: 240（缺 px），导致浏览器忽略该声明，动画完全不生效。
- 必须写全：例如
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) - 不要用
transition: all，它会让所有可动画属性一起动（比如 background-color 突然变色），干扰预期效果 - 如果用了
box-sizing: border-box，确保 padding 和 border 不在 width 动画中被二次拉伸
JavaScript 控制类名比直接操作 style 更可靠
用 JS 切换 class（如 search-box--expanded）来触发动画，比直接改 element.style.width 更可控。后者会内联覆盖 CSS 中的 transition，且难以复位。
- HTML 中初始不加展开类：
<input type="text" class="search-box"> - CSS 定义两个状态：
.search-box { width: 32px; transition: width 0.3s ease; } .search-box--expanded { width: 240px; } - JS 里用
element.classList.toggle('search-box--expanded')，避免重复添加或遗漏移除 - 如果搜索框有 icon 按钮，记得给按钮也加
pointer-events: none或用z-index避免遮挡输入焦点
移动端点击区域小、focus 失败是高频问题
收起状态下 width: 32px 通常只够放一个放大镜图标，用户点不到输入框。这时候不能只靠 width 动画，得配合 padding-left 或伪元素扩大热区。
- 给
.search-box设置padding-left: 32px，再用::before绝对定位图标，这样点击左侧空白也能聚焦 - 收起时
input的opacity: 0+pointer-events: none是危险操作——会导致 focus 后键盘打不开，尤其 iOS Safari - 真正安全的做法：始终让
input可聚焦，用transform: scaleX(0)配合origin做视觉隐藏，但保留交互能力
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
