width过渡失效因auto无法插值，应避免用auto起始值；推荐max-width过渡或transform替代，兼顾兼容性与性能。
focus 时 width 变化不生效或跳变？检查 transition 是否作用于 width
直接写 transition: width 0.3s ease; 往往无效——因为初始 width 是 auto，而 auto 无法参与 CSS 过渡计算。浏览器遇到 width: auto → width: 200px 会直接跳变，不插值。
解决办法是：**避免用 auto 作为起始值**。常见做法：
- 给搜索框设固定初始
width（如width: 120px;），focus 时过渡到更大值（如width: 240px;） - 或用
min-width+flex布局配合max-width过渡（更灵活，但需父容器支持） - 绝对不要写
transition: all 0.3s;—— 它会尝试过渡所有可动画属性，包括不可动画的（如display），反而拖慢渲染
想保持“默认窄、点击后撑开”，又不想写死像素宽度？用 max-width 过渡
当需要响应式或内容自适应时，width 不够灵活。max-width 是更好的选择，它允许元素在内容推动下自然伸展，同时又能被过渡控制。
示例结构：
立即学习“前端免费学习笔记（深入）”；
.search-input {
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 4px;
max-width: 140px;
transition: max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.search-input:focus {
max-width: 280px;
outline: none;
border-color: #007bff;
}
注意点：
-
max-width过渡只在「收缩」或「扩张」方向起作用；若内容本身很短，它不会强制撑满 280px - 使用
cubic-bezier(0.4, 0, 0.2, 1)比ease更顺滑，尤其适合输入框这类轻量交互 - 务必加
outline: none（或自定义 focus outline），否则原生蓝色边框会和你的 border 叠加
移动端点击无反应？focus 触发条件没满足
iOS Safari 和部分安卓浏览器中，:focus 在 <input> 上默认只对可编辑元素生效，但某些包裹结构（比如用 <label></label> 包着 <input> 却没设 for 或 htmlFor）会导致 focus 失败。
排查步骤：
- 确保
<input type="search">没有被pointer-events: none或tabindex="-1"阻断 - 如果用了
label，确认for属性值与 input 的id严格匹配（大小写敏感） - 在 iOS 上，某些情况下需给 input 加
cursor: text才能唤起软键盘并触发 focus - 别依赖
:focus-within做主逻辑——它在旧版 Android WebView 中支持差
过渡太慢或卡顿？优先用 transform 替代 width
修改 width 或 max-width 会触发 layout（重排），尤其在复杂布局中可能掉帧。真正高性能的做法是：用 transform: scaleX() 模拟拉伸效果，它只走合成器管线。
实操方式（需配合 wrapper）：
.search-wrapper {
display: inline-block;
overflow: hidden;
}
.search-input {
transform-origin: left center;
transition: transform 0.25s ease;
}
.search-input:focus {
transform: scaleX(1.8);
}
缺点与权衡：
- 缩放会等比放大边框、文字、内边距——需额外调
font-size或padding抵消 - 不能单独控制水平拉伸而不影响垂直（
scaleX安全，scale会压扁文字） - 若搜索框带圆角，
scaleX会让圆角也拉伸变形，此时仍建议回归max-width方案
真正要兼顾平滑、兼容和语义，max-width + 合理的初始尺寸仍是多数场景最稳的选择。别为了“看起来高级”强行上 transform，尤其当设计稿明确要求宽度像素值时。
