flex-basis 动画受限，因参与 flex 分配阶段而非纯视觉属性；推荐用 width + transition 替代，并设 width: 32px 初始态、overflow: hidden 等防抖动，js 触发需避强制重排，safari 要移除 min/max-width。
transition 对 flex-basis 的动画支持很有限
直接给 flex-basis 加 transition 在多数浏览器里不会触发重排动画，尤其当父容器是 display: flex 且子项未显式设置 flex 缩放行为时。浏览器会跳过中间状态，直接跳到最终值。
原因在于 flex-basis 参与的是 Flex 布局的“分配阶段”，不是纯粹的视觉属性；transition 只能作用于可计算、可插值的 CSS 属性，而 flex-basis 的实际生效值常被 flex-grow/flex-shrink 动态覆盖，导致动画失效。
- 用
width替代更可靠：只要搜索框不依赖 flex 自动伸缩逻辑，就优先改用width - 若必须保留在 flex 容器中，需固定
flex-shrink: 0和flex-grow: 0，再对flex-basis尝试过渡（仅 Chrome 110+ 等新版较稳） - 避免同时设置
width和flex-basis—— 二者冲突时，flex-basis优先级更高，但动画仍可能断掉
width + transition 是最稳妥的伸缩方案
对搜索框设 width 并配合 transition: width 0.3s ease，几乎在所有现代浏览器中都能平滑运行。关键是控制初始和激活态的宽度值，以及避免布局抖动。
常见错误现象：width: 0 → width: 240px 动画时，输入框内容突然换行、图标错位、或右侧按钮被挤出视口。
立即学习“前端免费学习笔记（深入）”；
- 初始态建议用
width: 32px（刚好容下搜索图标），而非0—— 防止元素坍缩导致offsetWidth计算异常 - 激活态推荐用
width: 240px或width: min(240px, 80vw)，兼顾小屏适配 - 务必加
overflow: hidden和white-space: nowrap，防止文字溢出破坏动画节奏 - 如果父容器有 padding 或 border，记得用
box-sizing: border-box统一基准
JavaScript 触发时机不对会导致动画卡顿或跳变
用 JS 切换 class 控制宽度时，若在事件回调里连续读写样式（比如先改 class，立刻读 offsetWidth），会强制触发同步重排，打断 transition 流程，表现为“闪一下再动”或直接无动画。
典型场景：点击放大按钮后，立即调用 input.focus()，又没等样式生效就测量宽高。
- 改用
getComputedStyle读取目标值前，加requestAnimationFrame延迟一帧 - 或者干脆放弃 JS 测量，用 CSS 自带的 :focus-within 或 :has()（如支持）驱动状态切换
- 若需精确控制（比如点击空白收起），监听
blur后用setTimeout(..., 0)延迟移除 class，留出动画时间
移动端 Safari 的 transition 兼容细节
iOS Safari 对 transition 的硬件加速判断更保守，纯 width 动画有时会掉帧，尤其在页面有大量其他动画或滚动时。
容易被忽略的一点：Safari 不支持对 min-width 或 max-width 做 transition，哪怕你只改了 width，只要同时存在 min-width: 32px 这类限制，动画也可能卡顿。
- 移除所有
min-width/max-width，改用width范围控制（如width: clamp(32px, 50%, 240px)） - 为 input 添加
transform: translateZ(0)或will-change: width（慎用，仅在必要时） - 避免在
@media查询中动态切换transition属性值 —— Safari 可能不重绘过渡链
