正确做法是用 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（设一个足够覆盖内容的固定值）。只要这个值大于实际高度，元素仍按自身内容撑开，但动画能跑起来。
常见错误：
- 把
max-height设成999px：收起时会明显延迟，因为浏览器得从 999px 动画到当前高度 - 没加
overflow: hidden：内容会溢出，动画看不出“折叠”效果 - 父容器是 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 布局干扰：
立即学习“前端免费学习笔记（深入）”；
- 给搜索框外层容器加
display: inline-block或display: block - 设
min-width: 0和flex-shrink: 0（如果它还在 flex 里） - 容器加
overflow: hidden，input 保持width: 100% - transition 写在容器上，不是 input 上
用 :focus + transition 做聚焦展开，简单但有限制
适合纯表单场景，比如独立搜索区域。写法极简：.search-input:focus { width: 200px; transition: width 0.3s; }，配合初始 width: 40px。但它只响应焦点，不支持按钮控制、无法记忆状态、移动端键盘弹出会触发两次 focus/blur 导致抖动。
关键细节：
- 别依赖
:focus-within包裹整个容器——IE 不支持，Safari 在某些嵌套下失效 - input 要有
tabindex才能被 JS focus，否则.focus()调用无效 - 动画时间别超过 0.4s，否则用户点击后等待感明显
避免和 Bootstrap collapse 混用
Bootstrap 的 collapse 是基于 height 计算的 JS 动画，它会读取 getComputedStyle().height 来确定起止值。如果你同时给同一元素加 transition: width，两个机制打架：collapse 改 height，你改 width，结果就是半开半关、动画中断、Safari 直接不动。
要么彻底不用 collapse，自己用 class 切换 + CSS 控制；要么就老实用 collapse，别掺和 width 动画。混用的典型症状：
- 点击按钮后，搜索框闪一下就消失
- 第二次点击才正常展开
- 移动端键盘收起后，导航栏高度错乱
真正可靠的展开动画，从来不是靠猜哪个属性能动，而是看浏览器渲染管线里哪个值能被连续插值——max-height、opacity、transform 行，height 和 width 在复杂布局里基本靠不住。
