如何实现Bootstrap导航栏搜索框自动展开_编写CSS transition宽度动画-css教程-PHP中文网

搜索框默认收缩时应设初始 width: 40px（容放大镜图标），禁用 width: auto 或 0，加 padding-left: 28px 防遮挡文字，用 transition: width 0.3s ease 避免跳变。

如何实现bootstrap导航栏搜索框自动展开_编写css transition宽度动画

Bootstrap 默认的 .navbar-form 或 .navbar-nav 里放 <input>，如果不干预，点击展开时会直接跳变——因为浏览器对 width: auto 或 display: none 的元素不支持 transition。

关键点：必须给搜索框一个明确的、可动画的初始宽度，且不能是 auto 或 0（除非用 max-width 配合 overflow: hidden）。

推荐设初始 width: 40px（刚好容纳放大镜图标），同时加 padding-left: 28px 避免文字被遮挡
确保父容器有 position: relative，方便图标绝对定位
禁用 display: none 切换，改用 opacity: 0; visibility: hidden; + width 控制显隐
过渡属性只写 transition: width 0.3s ease, padding 0.3s ease;，别加 all，否则边框、颜色等无关变化也会触发重绘

常见错误是直接在 :focus 或 JS 里设 width: 200px，但若父容器（如 .navbar-nav > li）没预留空间，旁边菜单项会被挤跑。

根本解法是让搜索框脱离文档流，或提前占位：

大师兄智慧家政

一款AI视频创作工具，主要用于58到家打造的AI智能营销工具，适合需要提升相关任务效率的用户。

下载

给包裹 <input> 的 <li> 加 position: static（覆盖 Bootstrap 的 float: left），再对内部 <input> 设 position: absolute; right: 0;
或者更稳妥：用 min-width + flex 布局，把搜索框放在 .navbar-collapse 末尾，并设 margin-left: auto
如果用 JS 控制，记得在展开前先 getBoundingClientRect() 检查是否已渲染，否则第一次动画可能失效

在 iOS Safari 或部分 Android WebView 中，width 动画常卡顿甚至跳变，不是 CSS 写错了，而是触发了硬件加速限制。

绕过方式很直接：

纯 CSS 方案（比如靠 :focus）在点击图标展开、再点空白收起时逻辑断裂。JS 是更可控的选择，但容易忽略细节：

别用 element.style.width = '200px' 直接赋值——这会覆盖 CSS 中的 transition 声明；应切换 class，例如 search-input--expanded
收起时，不能等 transitionend 再设 width: 40px，否则动画中断；正确做法是先移除 expanded class，再用 setTimeout(() => { input.style.width = '40px'; }, 10) 延迟回填
监听 document.click 收起时，要 e.target.closest('.search-input') 排除输入框自身，否则一点击就收
如果导航栏用了 data-bs-toggle="collapse"，注意 Bootstrap 5 的 collapse 会重置子元素 display，需在 shown.bs.collapse 后再初始化搜索框状态