抽屉式搜索框不能用width过渡实现“拉开”效果，因其触发重排、卡顿且移动端不可用；应改用transform: translatex()位移配合固定宽度控制显隐，确保input可聚焦、动画流畅。
抽屉式搜索框不能靠 width 过渡来实现“拉开”效果——它会触发重排、卡顿、响应迟滞，且移动端几乎不可用。
为什么 width: 0 → width: 320px 过渡会失败
浏览器对 width 变化的动画不启用硬件加速，每次帧都需重新计算布局（layout），尤其在低端安卓或 Safari 上极易掉帧；更关键的是，width 从 0 开始过渡时，内部 input 的 focus 状态、placeholder 渲染、甚至 placeholder 宽度计算都可能错乱；若父容器用了 overflow: hidden，width 扩张过程还可能被截断，出现“只拉出一半”的现象。
- width 过渡本质是 layout 动画，性能远低于 transform
- width: 0 时，
input实际仍可获得焦点，但尺寸为 0，用户看不到光标，也无法输入 - 某些字体（如中文字体+emoji混排）会让内容宽度动态溢出，导致 width 值与视觉不符
- 媒体查询切换 width 值时，容易因断点临界值抖动造成状态丢失
真正该用 transform: translateX() + width: 100vw 控制显隐
抽屉搜索框应始终保有真实 DOM 和固定宽度（如 width: 320px 或 width: 100vw），仅靠位移隐藏/显示。这样既避免 layout，又确保 input 始终可聚焦、可滚动、可读取值。
- 默认状态：
transform: translateX(-100vw)（彻底移出视口左边界） - 激活状态：
transform: translateX(0)，配合transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) - 必须设
width: 100vw或明确固定值（如320px），不能依赖width: auto - 遮罩层（
.overlay）用position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;，z-index 设为比抽屉低、比页面内容高（如抽屉z-index: 1000，遮罩z-index: 999）
z-index 失效的三个典型场景
抽屉弹出后点不中、遮罩没反应、关闭按钮被盖住——多数不是 z-index 数值不够大，而是层级关系被意外打断。
-
position: relative父容器未设置，导致子元素 z-index 无法形成新层叠上下文，所有 z-index 都在 body 层级竞争 - 抽屉容器本身用了
transform（哪怕只是translateZ(0)），会隐式创建新层叠上下文，其内部所有元素的 z-index 都相对它计算，和外部页面不再同级 - 遮罩层写成
div.overlay，但没加position: fixed或position: absolute，z-index 直接无效
移动端点击区域小、无法触发打开的硬伤
纯 CSS 抽屉依赖 :checked 或 JS 切换类，但 iOS Safari 对 input[type="checkbox"] 的点击热区极小（约 12×12px），裸露 checkbox 几乎无法点中。
- 必须用
<label for="search-toggle"></label>显式包裹触发区域，且 label 至少设display: block; min-width: 44px; min-height: 44px - 不要把 checkbox 放进 label 内部再用
for关联——那样:checked ~ .search-drawer选择器会失效 - 测试务必真机触控，模拟鼠标点击无法复现 Safari 的 touch target 判定逻辑
- 如果用 JS 控制，记得给触发按钮加
touch-action: manipulation，防止 iOS 300ms 延迟
抽屉式搜索框最难的从来不是“怎么滑出来”，而是“怎么在各种缩放、输入法展开、暗色模式切换、屏幕旋转、第三方组件嵌入的组合场景下，依然保持 input 可聚焦、值可提交、动画不跳变、遮罩不漏点”。这些细节没有银弹，只能靠 transform 站稳底层，再一层层补上交互契约。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
