直接原因是width从auto或fit-content切换到像素值导致无法插值；解决需统一用width+max-width控制、box-sizing:border-box、优先transform缩放、避免display过渡，并注意Safari兼容性与边界状态处理。
导航搜索框伸缩时宽度突变、动画卡顿
直接原因通常是 width 从 auto 或 fit-content 切换到具体像素值（比如 200px），浏览器无法插值计算，导致动画跳变或失效。
解决思路是让起始和结束状态都落在可动画的数值类型上：
- 统一用
width配合max-width控制伸缩范围，避免auto - 初始状态设为
width: 0; overflow: hidden;，展开时过渡到目标宽度（如width: 240px;） - 若需响应式适配，用
max-width代替固定width，并配合transition: max-width 0.3s ease-in-out;
CSS transition 不生效，点击后立刻展开无动画
常见于 JS 动态添加类名但样式未及时触发重排，或过渡属性写错。关键检查点：
- 确保
transition写在「默认状态」而非「激活状态」里，例如：.search-input { transition: width 0.25s ease; } - 避免对
display（如none↔block）做过渡——它不可动画，改用opacity+visibility+height/width - JS 中如果先加类再读取
offsetWidth或强制触发重排（如getComputedStyle(el).height），才能让浏览器识别“状态已变”，进而启动过渡
伸缩后输入框内容被裁切或文字溢出
本质是 padding、border 和 box-sizing 协同问题。默认 box-sizing: content-box 会让 width 不含内边距和边框，导致视觉宽度比设定值大。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 统一加
box-sizing: border-box;到所有输入相关元素（.search-input、.search-wrapper） - 避免在伸缩过程中动态改
padding或font-size，否则会干扰宽度计算；如需变化，单独给padding加过渡，且起止值均为数值（别用em混合px） - 若用
flex布局嵌套，确认父容器没设flex-shrink: 0锁死尺寸，或子项漏了flex: 1
移动端 Safari 下伸缩抖动、回弹或 touch 响应延迟
主要是 Safari 对 transform 和 will-change 的优化策略更激进，同时对非合成层动画惩罚更重。
针对性处理：
- 优先用
transform: scaleX()替代width（需配合origin控制缩放中心），它天然走合成层，更顺滑 - 加
will-change: transform;到搜索框（注意：仅在激活前一刻加，用完移除，避免内存泄漏） - Safari 对
:focus-within支持不稳定，若靠它触发伸缩，改用 JS 监听focusin/blur事件，并加touch-action: manipulation;提升触控响应
getComputedStyle 快照 + 状态机控制来兜底。 
