直接给.form-control设width transition易失效，因width:100%与flex布局、box-sizing、min-width等冲突；正确做法是用包裹容器控制宽变，input保持100%，容器设inline-block+overflow:hidden并定义展开/收缩类，transition写在容器上。
直接用 width 做 transition 实现搜索框点击展开，看似简单，但实际在 Bootstrap 环境下极易失效——因为 .form-control 默认的 width: 100% 会和父容器 flex 布局、盒模型、甚至 min-width 冲突，导致动画卡顿、跳变或根本不动。
为什么单纯改 width transition 不工作
Bootstrap（尤其是 v5）中，.form-control 是块级元素，且默认带 width: 100%。当你试图用 JS 切换两个固定宽度（比如 32px → 200px），浏览器会尝试从「占满父容器」突然收缩为一个像素值，中间存在计算歧义；更常见的是父容器没设 overflow: hidden 或没限制 inline 宽度，导致展开时布局撑开、动画被中断。
- 父容器未设
display: inline-block或overflow: hidden，宽度变化会触发重排并“溢出” -
.form-control的box-sizing是border-box，但 padding + border 会压缩可用 width，让 transition 起始值不准 - 在 navbar 里直接套用，
width: 100%和flex-grow-1共存时，CSS 优先级会让 transition 被忽略
正确做法：用容器控制 width，input 保持 100%
不要直接给 <input> 设 width 或 transition，而是用一个包裹容器承担尺寸变化职责，让 input 始终填满它。这是最稳定、兼容性最好的路径。
- HTML 结构必须包含明确的容器，例如：
<div id="search-container"><input class="form-control"></div> - CSS 中给容器设
display: inline-block+overflow: hidden，再定义两个状态类：.search-collapsed { width: 32px; }和.search-expanded { width: 200px; } - transition 必须写在容器上，且只动
width和opacity（避免触发布局重排）：transition: width 0.3s ease, opacity 0.2s ease; - JS 只负责切换容器类：
container.classList.toggle('search-collapsed');，别碰 input 的样式
移动端点击后无法 focus 输入框？
动画过程中如果容器 width 太小（比如 32px），input 实际可点击区域可能为 0，导致 click 后没触发 focus。这不是 JS 问题，是视觉反馈断层。
立即学习“前端免费学习笔记（深入）”；
- 确保
.search-collapsed下 input 仍有最小可点区域（哪怕透明）：padding: 0.375rem 0.75rem;保留 - 在 click 事件里手动 focus：
container.addEventListener('click', () => { container.classList.add('search-expanded'); input.focus(); }); - 避免用
:focus-within触发展开——它依赖 input 被点中，而初始状态 input 根本不可见/不可点
真正难的不是写那几行 transition，而是判断哪个容器该承担 width 变化、哪些 padding 和 box-sizing 会偷偷干扰起始尺寸。一旦把动画逻辑从 input 上剥离，交给语义清晰的 wrapper，90% 的“动画不动”问题就消失了。
