用transition控制宽度变化最简单有效，但需配合容器类切换、焦点管理及CSS属性组合，否则易出现跳变、失焦、卡顿或无障碍失效等问题。

直接用 transition 控制宽度变化是最简单有效的方案，但必须配合容器类切换、焦点管理与合适的 CSS 属性组合，否则会出现跳变、失焦、动画卡顿或无障碍失效等问题。

用 width + transition 实现平滑展开

不要只给 input 单独设 transition: width 0.3s —— 宽度从 0 或极小值开始时，placeholder 和文字渲染可能滞后，导致视觉撕裂。更稳妥的做法是：让容器（如 .search-container）控制展开状态，input 宽度用百分比或 flex 布局自适应，再配合 opacity 和 transform: scaleX() 微调入场感。

• width 值建议用 min-width/max-width 配合 flex: 1，避免硬编码像素值导致响应式断裂
• 过渡函数优先选 cubic-bezier(0.34, 1.56, 0.64, 1)，比 ease-in-out 更自然，尤其在收起时减少“粘滞感”
• 务必加 will-change: width（仅在激活态下设置），否则 Chrome/Firefox 在低配设备上容易掉帧

点击按钮后必须手动 focus() 输入框

很多实现漏掉这步：用户点击搜索图标，输入框没获得焦点，键盘无法直接输入。CSS 的 :focus 样式也不会触发，autofocus 在动态插入场景下无效。

• 在 JS 中绑定按钮 click 事件后，立刻调用 inputEl.focus()
• 如果用了 setTimeout 延迟展开，focus() 必须放在同一宏任务中，不能等 transitionend 后再调，否则 Safari 会拒绝聚焦
• 若页面有多个搜索入口（如 header + footer），需确保每次只聚焦当前激活的 input，避免 document.activeElement 错乱

失去焦点时移除 .active 类要防误触

监听 blur 然后立刻移类，会导致点击搜索按钮内部（比如图标或按钮文字）时，input 先失焦、类被删、按钮还没响应点击 —— 展开态瞬间消失。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

立即学习“前端免费学习笔记（深入）”；

• 改用 mousedown 捕获整个容器，判断 e.target 是否在 input 或按钮内；只有当点击发生在容器外，才延迟 150ms 移类（给 click 事件留出时间）
• 或者用 pointerdown + pointerup 组合，更可靠地识别真实点击意图
• 别依赖 document.addEventListener('click') 全局监听 —— 它和 React/Vue 的事件系统易冲突，且在模态层（如 <dialog>）里会穿透

移动端键盘弹出后收起，resize 不可靠

iOS Safari 在键盘收起时不会触发 resize，Android Chrome 则可能触发多次。靠它来恢复搜索框尺寸，大概率失败。

• 监听 focusout 事件比 blur 更准，它在焦点真正离开整个容器时才触发
• 对 iOS，可补充监听 scroll（键盘收起常伴随页面回弹），但需防抖，避免高频触发
• 终极兜底：在 input 的 change 或 submit 后强制重置容器类，不依赖窗口事件

最易被忽略的是：展开态下若用户缩放页面（Ctrl/Cmd+ +/-），width 百分比计算会偏移，而 transform: scaleX() 不受缩放影响 —— 所以关键动效尽量用 transform 和 opacity，width 只做基础布局支撑。