侧边栏初始隐藏时transform: translatex(-100%)不生效，因元素仍占文档流空间且父容器未设overflow: hidden；应使用position: fixed/absolute、明确宽度、transition动效及class切换控制显隐，并注意移动端性能与右滑入场等细节。
侧边栏初始隐藏时，transform: translateX(-100%) 为什么有时不生效？
因为元素默认占据文档流空间，即使用 translateX 移走，它仍占位，导致右侧内容没“让出”位置，视觉上像没动。更关键的是：若父容器没设 overflow: hidden，滑出部分会直接显示出来，动效就“漏了”。
- 必须给侧边栏父容器（比如
或布局 wrapper）加overflow: hidden - 侧边栏本身推荐用
position: fixed或absolute，脱离文档流，避免影响主内容布局 -
translateX(-100%)的基准是自身宽度，所以得确保宽度明确（如width: 280px），不能依赖auto - 别忘了加
transition: transform 0.3s ease，否则只有瞬移，没有滑动
点击按钮触发显隐，JavaScript 里该操作哪个 class？
别直接改 style.transform，那样难维护、无法复用 CSS 动效。推荐用 class 切换控制状态，比如定义两个 class：sidebar-open 和 sidebar-closed，再用 JS 切换它们。
- 关闭态：
.sidebar { transform: translateX(-100%); } - 开启态：
.sidebar-open .sidebar { transform: translateX(0); } - JS 只需
document.body.classList.toggle('sidebar-open')（假设 sidebar 是 body 子级） - 如果侧边栏在
<header></header>内，就操作对应父容器的 class，保持 DOM 结构与 class 作用域一致
移动端触摸后页面卡顿或滑动不跟手？
本质是浏览器在每帧重排重绘太重，尤其当侧边栏含大量 DOM 或未优化图片时。transform 虽属合成层，但若触发了 layout（比如读取 offsetWidth），就会打断 GPU 加速。
- 确保侧边栏内无
width: auto+white-space: normal的长文本，这种组合极易触发布局计算 - 加
will-change: transform（仅在需要时，别滥用）可提前提示浏览器提升图层 - 避免在
touchmove里执行 class 切换——用click或tap事件更稳；iOS Safari 对touchstart后立即transform支持更好 - 测试时关掉开发者工具的 “Emulate touch screen”，真实设备表现才准
如何让侧边栏从右向左滑入（而非默认左滑）？
只需把方向逻辑翻过来：隐藏时移到屏幕右侧外，即 translateX(100%)，再配合 right: 0 定位。
- 结构上，侧边栏需设
right: 0、top: 0、height: 100vh - 隐藏态：
transform: translateX(100%)（注意不是-100%） - 显示态：
transform: translateX(0) - 若同时支持左右双侧边栏，不要共用同一 class 名，比如用
sidebar-right-open和sidebar-left-open避免样式冲突
真正麻烦的是 backdrop 遮罩层的同步显隐和点击穿透控制——它得和 transform 动效帧率一致，否则会出现“先闪遮罩、再滑菜单”的撕裂感。这点容易被忽略，但直接影响第一印象。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
