唯一可靠方案是 transform: translatex() 配合 transition，因其不触发重排、走 gpu 合成层，移动端稳定 60fps；禁用 display/left/width/height 动画，避免卡顿或失效。
用 transform: translateX() 配合 transition 是唯一可靠、不触发重排、移动端也顺滑的方案。别碰 display、left、width 或 height 动画——它们要么卡顿，要么根本动不了。
为什么必须用 transform: translateX() 而不是 left
left 改变的是布局位置，每次变化都会触发浏览器重排（reflow），尤其在低端安卓 WebView 或 iOS Safari 里掉帧明显；transform 属于合成层操作，只走 GPU，动画帧率稳定。实测中，用 left 在部分安卓机上滑动延迟高达 120ms，而 translateX() 基本维持 60fps。
常见错误现象：
- 侧边栏滑入时“一卡一卡”，松手后才补完动画
- 滚动页面时侧边栏抖动或错位
- 在微信内置浏览器里完全不动，只闪一下
正确写法示例：
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 260px;
height: 100vh;
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
will-change: transform;
}
.sidebar.open {
transform: translateX(0);
}
transition 必须写全，漏参数会出问题
只写 transition: transform 0.3s 不够——缺了缓动函数，收放会生硬，像机械臂；缺了属性名（比如写成 transition: all 0.3s），可能意外带动其他样式变化，比如阴影或字体大小抖动。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
推荐组合：
-
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)：比ease-in-out更自然，收尾更柔和 - 不要加
transition-delay：用户点击后应立刻响应，延迟会感知为“没点上” - 避免在父容器上设
transition：容易被继承，导致整页元素误带动画
初始隐藏不能用 display: none 或 visibility: hidden
display: none 会让元素脱离文档流，transition 根本不生效；visibility: hidden 虽然保留空间，但无法与 transform 形成连贯过渡，且可能造成点击穿透（背景内容被误点）。
必须用视觉位移隐藏：
- 默认状态：设置
transform: translateX(-100%)（宽度为 260px 就写 -260px，别偷懒写 -100%） - 确保父容器没有
overflow: hidden：否则侧边栏被裁掉，动画只露半截 - 如果侧边栏内容有绝对定位子元素，检查它们的
top/left是否依赖父容器可视区域——位移后可能错位
移动端蒙层点击失效？大概率是这三处没设对
遮罩层（.sidebar-overlay）点不响应，不是 JS 绑定问题，而是 CSS 层级或交互属性缺失：
- 必须设
position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999;（且比侧边栏的z-index高） - 加
cursor: pointer或touch-action: manipulation，iOS Safari 才会把 click 当作可交互目标 - 确认没被
pointer-events: none父容器包裹，也没被其他fixed元素挡住（比如顶部导航栏用了z-index: 1000却没设position: relative）
复杂点在于：动画结束时机和事件监听不同步。比如用户快速连点两次，classList.toggle() 可能执行两次，导致状态错乱；建议用 classList.replace() 或加节流判断，而不是依赖 toggle 的原子性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
