如何用CSS实现搜索框展开动画？

正确做法是用 max-height 实现平滑展开：设 max-height: 0 → max-height: 300px（足够覆盖内容的固定值），并配合 overflow: hidden；避免混用 Bootstrap collapse 与 width 动画，禁用 height: auto 过渡。

用 max-height 实现平滑展开，别碰 height: auto

直接写 height: 0 → height: auto 的 transition 永远不会动——浏览器无法计算 auto 的像素值，动画直接跳变或卡死。正确做法是用 max-height 代替：max-height: 0 → max-height: 300px（设一个足够覆盖内容的固定值）。只要这个值大于实际高度，元素仍按自身内容撑开，但动画能跑起来。

常见错误：

1. 把 max-height 设成 999px：收起时会明显延迟，因为浏览器得从 999px 动画到当前高度
2. 没加 overflow: hidden：内容会溢出，动画看不出“折叠”效果
3. 父容器是 flex 且没设 flex-shrink: 0：宽度被压缩导致输入框文字换行、高度突变

width 动画在 Bootstrap 导航栏里大概率失效

在 .navbar 这类 flex 容器里给搜索框容器加 width transition，基本等于白写。原因很实在：.navbar 默认 display: flex，子元素 width 受 flex-basis 和 min-width 干扰；.form-control 自带 width: 100%，和你 JS 设置的 width: 200px 冲突；键盘弹出后 resize 触发重排，width 值被重置。

真要用 width 动画，必须绕过 Bootstrap 的 flex 布局干扰：

1. 给搜索框外层容器加 display: inline-block 或 display: block
2. 设 min-width: 0 和 flex-shrink: 0（如果它还在 flex 里）
3. 容器加 overflow: hidden，input 保持 width: 100%
4. transition 写在容器上，不是 input 上

用 :focus + transition 做聚焦展开，简单但有限制

适合纯表单场景，比如独立搜索区域。写法极简：.search-input:focus { width: 200px; transition: width 0.3s; }，配合初始 width: 40px。但它只响应焦点，不支持按钮控制、无法记忆状态、移动端键盘弹出会触发两次 focus/blur 导致抖动。

关键细节：

1. 别依赖 :focus-within 包裹整个容器——IE 不支持，Safari 在某些嵌套下失效
2. input 要有 tabindex 才能被 JS focus，否则 .focus() 调用无效
3. 动画时间别超过 0.4s，否则用户点击后等待感明显

避免和 Bootstrap collapse 混用

Bootstrap 的 collapse 是基于 height 计算的 JS 动画，它会读取 getComputedStyle().height 来确定起止值。如果你同时给同一元素加 transition: width，两个机制打架：collapse 改 height，你改 width，结果就是半开半关、动画中断、Safari 直接不动。

要么彻底不用 collapse，自己用 class 切换 + CSS 控制；要么就老实用 collapse，别掺和 width 动画。混用的典型症状：

1. 点击按钮后，搜索框闪一下就消失
2. 第二次点击才正常展开
3. 移动端键盘收起后，导航栏高度错乱

真正可靠的展开动画，从来不是靠猜哪个属性能动，而是看浏览器渲染管线里哪个值能被连续插值——max-height、opacity、transform 行，height 和 width 在复杂布局里基本靠不住。