侧边栏滑出动画必须用 transform: translatex() 配 overflow: hidden 实现，禁用 left/width；结构需三层嵌套，图片响应式处理，js 防连点、手势兼容及可访问性更新缺一不可。
用 transform + overflow:hidden 实现滑出动画
侧边栏滑出效果必须用 transform: translateX()，别碰 left 或 width。前者触发 GPU 加速，动画顺；后两者强制重排，手机上一卡一卡。关键结构是三层嵌套：sidebar-wrapper（设 overflow: hidden）、sidebar-inner（设 display: flex）、每张图用 flex: 0 0 100% 占满视口宽。
常见错误是把图片直接塞进固定宽容器里，结果溢出、滚动条乱跳、点击后错位。正确做法是让外层容器宽度为 100%，内层容器宽度为 100% × 图片数量，再靠 translateX 控制可视区域。
- 外层容器加
position: fixed或absolute，避免影响主文档流 - 初始状态设
transform: translateX(-100%)，完全隐藏在屏幕左侧 - 展开时设
transform: translateX(0)，收起时还原 - 必须配
transition: transform 0.3s ease-out，别漏ease-out，否则收起时像刹车失灵
响应式图片怎么塞进侧边栏不崩
侧边栏里放图，不能写死 width: 300px，也不能用 width: 100vw——它会随整个视口变，但你要的是“占满当前侧边栏宽度”。正确路径是：侧边栏容器本身响应式，图片继承其尺寸。
推荐组合：max-width: 400px（桌面最大宽）+ width: 100%（小屏自适应）+ height: auto + display: block。如果需保持宽高比，现代浏览器直接加 aspect-ratio: 16/9；旧版用 padding-top: 56.25% 技巧。
- 所有
<img>必须带srcset和sizes，比如srcset="img-400w.jpg 400w, img-800w.jpg 800w"+sizes="(max-width: 768px) 100vw, 400px" - 禁止给
<img>设固定height，否则缩放时变形 - 侧边栏容器加
box-sizing: border-box，避免内边距撑破宽度
JS 控制开关状态时防连点和边界越界
用户狂点“展开”按钮，transform 动画还没结束就又触发一次，会导致 currentIndex 错乱、位移值错位、甚至侧边栏卡在半路。必须加锁 + 截断。
核心变量只用两个：let isAnimating = false 和 let isExpanded = false。每次点击前先检查：if (isAnimating || (isExpanded && direction === 'open')) return。动画结束后在 transitionend 里重置 isAnimating = false。
- 按钮点击后立即设
disabled = true，比纯 JS 锁更直观可靠 - 展开/收起逻辑统一走一个函数，传参控制方向，别写两套重复代码
- 移动端要监听
touchstart替代click，避免 300ms 延迟 - 键盘支持：按
Escape收起，焦点管理要跟上，否则盲人用户找不到出口
移动端手势滑动收起的兼容写法
用户手指左滑侧边栏内容想关掉，这个交互不能只靠 JS 监听 touchmove 算位移——安卓 WebView 和 iOS Safari 对 touch 事件处理差异大，容易误判或卡顿。
稳妥做法是：只监听 touchstart 和 touchend，记录起点 X 坐标，结束时算差值。若位移 > 50px 且方向向左，就触发收起；否则忽略。别做实时 translate，那会让动画和手势冲突。
- 必须加
touch-action: pan-y到侧边栏容器，禁用默认横向滚动，否则手势被系统截胡 -
preventDefault()只在明确需要拦截时调用，乱用会导致页面无法滚动 - 收起后记得恢复
touch-action: auto，不然后续交互异常 - 真机测试必做：iOS 17+ 的 Safari 对
transform+fixed组合有渲染 bug，加will-change: transform可缓解
aria-expanded 同步改掉，屏幕阅读器就永远不知道菜单已关闭。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
