width动画不生效是因为auto无法参与过渡，应改用max-width或flex属性实现平滑伸缩，配合overflow-x: hidden和viewport优化确保兼容性与流畅性。
search输入框:focus时width动画不生效？
直接写 transition: width 0.3s 很可能没反应——因为初始 width 是 auto，而 auto 无法参与 CSS 过渡计算。
- 浏览器不支持
auto到具体数值（如200px）的过渡，会直接跳变 - 常见错误写法：
input { width: auto; transition: width 0.3s; } input:focus { width: 200px; } - 正确思路：用可动画的属性替代
width，或预先设好基础宽度
用max-width + overflow-x实现平滑伸缩
这是最稳妥、兼容性好（IE10+）、无需 JS 的方案。核心是让元素有“弹性空间”，靠 max-width 控制伸展上限，overflow-x: hidden 防文字溢出。
- 初始状态设较小
max-width（如120px），width: 100%占满父容器但被截断 -
:focus时把max-width放宽（如320px），配合transition: max-width 0.3s ease - 父容器需有明确宽度（如
display: inline-flex或固定width），否则width: 100%无意义
input {
width: 100%;
max-width: 120px;
transition: max-width 0.3s ease;
overflow-x: hidden;
}
input:focus {
max-width: 320px;
}
flex布局下用flex-grow更自然
如果搜索框在 display: flex 容器里（比如和按钮并排），优先用 flex 属性控制伸缩，比硬调 width 更健壮。
- 初始设
flex: 0 0 120px（不放大、不缩小、基准宽120px） -
:focus时改为flex: 1，自动撑开剩余空间 - 必须加
transition: flex 0.3s ease，否则伸缩仍是突变 - 注意：IE10/11 对
flex过渡支持有限，建议加-ms-flex前缀或降级为max-width方案
移动端点击后光标偏移或缩放？
iOS Safari 默认会在 input:focus 时放大文本、调整 viewport，导致伸缩动画错位甚至失效。
- 加
viewportmeta 禁止缩放：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> - 给
input加font-size: 16px（iOS 会把小于 16px 的 input 自动放大） - 避免用
transform: scale()模拟伸缩——会导致光标定位不准、点击区域偏移
实际效果是否流畅，取决于父容器约束是否清晰、transition 属性是否写在非 :focus 状态上、以及移动端那几个隐藏的渲染陷阱。这些地方一漏，动画就变成“闪一下”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
