HTML搜索框展开过渡效果的实现技巧-html教程-PHP中文网

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

html搜索框展开过渡效果的实现技巧

直接用 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 在动态插入场景下无效。

html-to-pptx-converter

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

下载

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

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

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

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