应使用 height + overflow: hidden 实现平滑折叠动画，width 动画在 flex 容器中易因 min-width、white-space 或键盘弹出导致跳变、中断；若必须用 width，需设 min-width: 0、flex-shrink: 0、box-sizing: border-box，并避免与 collapse 混用。
搜索框用 width 动画展开会失效？因为 collapse 不依赖 width
Bootstrap 的 collapse 组件动画基于 height，不是 width。直接给搜索框父容器加 transition: width 0.3s 并设置 width: 0 → width: 200px，看起来能动，但实际会卡顿、跳变，甚至在 Safari 中完全不触发重排——因为 collapse 内部靠 getComputedStyle().height 计算动画起止值，width 变化它根本不管。
常见错误写法：
<div id="search-collapse" class="collapse" style="transition: width 0.3s;"> <input class="form-control"> </div>
这种写法会让折叠/展开失去同步，尤其在移动端键盘弹出后 resize 触发时，高度计算错乱导致菜单“半开半关”。
- 真正起作用的只有
height+overflow: hidden组合 - 若硬要用
width，必须手动移除collapse类，改用纯 CSS + JS 控制显隐和过渡 - 折叠容器必须有明确的块级上下文（比如
display: block），否则height动画无法获取目标尺寸
怎么让搜索框在点击按钮后平滑展开（非 collapse）
想用 width 实现动态展开，就得绕过 collapse，自己控制状态和动画。核心是：按钮触发、JS 切换类、CSS 定义 width 过渡。
关键结构：
<div class="navbar">
<button class="btn btn-sm" id="search-toggle">?</button>
<div id="search-wrapper" class="search-wrapper">
<input class="form-control form-control-sm" type="search" placeholder="Search...">
</div>
</div>
- 给
#search-wrapper设初始width: 0; overflow: hidden; white-space: nowrap; - 加过渡：
.search-wrapper { transition: width 0.25s ease-in-out; } - 展开态类：
.search-wrapper.open { width: 200px; }（数值按需调整，别用100%，flex 容器里会撑满） - JS 里用
element.classList.toggle('open')，别用style.width = '200px'，否则无法回退
为什么 search-wrapper 加了 width 动画还一闪就收？
典型现象：点按钮，输入框闪一下就消失。根本原因是父级 flex 容器（.navbar）对子元素宽度收缩过于激进，或 white-space/min-width 没设好，导致浏览器渲染时把 width: 0 下的 input 当作“不可见内容”，直接跳过布局计算。
- 必须给
#search-wrapper加min-width: 0，防止 flex 压缩到负值 -
input要加flex-shrink: 0，否则在窄屏下会被强制压缩成 0 - 避免在
#search-wrapper上同时用padding和width，box-sizing 必须是border-box - 如果用了
input-group，整个input-group得包在#search-wrapper里，不能只包input
移动端键盘弹出时 width 动画被中断？
iOS Safari 和部分安卓 WebView 在软键盘弹出瞬间会强制触发一次 resize 事件，并重置 viewport 高度。此时若 #search-wrapper 正在做 width 过渡，动画会直接 cancel，表现为“展开一半就停住”或“突然缩回”。
- 监听
resize事件，在 keyboard 弹出时暂停动画：element.style.transition = 'none'，等focusin后再恢复 - 更稳做法：检测
window.visualViewport?.height变化，小于阈值（如500px）时认为键盘已弹出，延迟 100ms 再执行展开 - 别依赖
focus事件判断键盘状态——有些设备焦点早于键盘弹出，有些则晚，时序不可靠
复杂点在于，width 动画本身轻量，但一旦混入 flex 布局、viewport 变化、focus 状态切换，各端行为就难以对齐。真要兼顾体验，不如老实用 height + collapse，再配一个视觉上“像 width 展开”的伪效果（比如加个左右 border 渐显）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
