translateX() + transition 是移动端侧边栏滑动最稳最轻量方案，因不触发重排、GPU加速、兼容性好，且避免文档流干扰。
直接用
+
是目前移动端侧边栏滑动最稳、最轻量的方案，比
、
或
切换强得多——它不触发重排，GPU 加速默认生效，iOS 和安卓 WebView 都兼容。
为什么必须用
而不是
改
会强制浏览器计算布局（reflow），尤其在 DOM 深、样式多的页面里，滑动一卡一卡；
属于合成层操作，只走 GPU，动画帧率更容易拉满。另一个实际影响是：用
隐藏时，侧边栏仍占文档流位置，主内容区可能“晃一下”；而
完全脱离流，主内容区不受干扰。
常见错误：
缺少轴向标识，浏览器可能解析成
，导致意外下移
写成
（漏掉单位），无效
没给侧边栏设明确宽度（如
），
就按父容器算，滑不全
必须写在哪？怎么写才不翻车
必须写在侧边栏自身的基础状态上，不能只写在
里，也不能写在按钮或父容器上。否则 class 切换时，变换发生了，但过渡没被声明，就变成“瞬移”。
立即学习
“
前端免费学习笔记（深入）
”；
推荐写法：
别踩这些坑：
写成
—— 万一后续加了
或
变化，会意外带出其他动画，干扰逻辑
把
放在
或 JS 内联样式里，失效
初始状态用了
——
和
全部不生效，得先设为
或用
过渡
JS 控制显隐：class 切换是唯一靠谱方式
别在 JS 里写
，这会覆盖 CSS 中定义的
，首次展开没动画；也容易和 rotate/scale 等其他
值冲突。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
正确做法是纯 class 控制：
CSS 定义两个状态：
和
JS 用
切换
点蒙层关闭时用
，不是
，避免误触二次展开
监听
键：
注意：蒙层要设
，否则 iOS Safari 点击无响应。
移动端必须处理的三个隐藏问题
滑出后页面还能滚？那是滚动穿透。打开侧边栏时，得给
加
，但 Safari 下还得补
才真正锁住。
滑动卡顿？加
到侧边栏容器（仅在打开时动态加，关掉时移除），能提前提示浏览器升层，尤其对低端安卓 WebView 有效。
焦点丢失或屏幕阅读器不可读？隐藏态别用
，用
+
属性（支持渐进）；展开时记得
到第一个可交互元素。
最易忽略的一点：所有动画时长都得落在
区间——短了突兀，长了像卡死；
或
比
更符合手指滑动的物理直觉。
transform: translateX()transitionleftwidthdisplaytranslateX()leftlefttranslateX()lefttranslateX(-100%)translate(-200px)translateX(-200px) translateY(-200px)translateX(-200)width: 280pxtranslateX(-100%)transitiontransition.sidebar--opentransition: transform 0.3s ease;transition: all 0.3scoloropacitytransition:hoverdisplay: nonetransformtransitiondisplay: blockvisibility: hiddenel.style.transform = 'translateX(0)'transitiontransform.sidebar--closed { transform: translateX(-100%); }.sidebar--open { transform: translateX(0); }sidebarEl.classList.toggle('sidebar--open')classList.remove()toggle()Escdocument.addEventListener('keydown', e => e.key === 'Escape' && sidebarEl.classList.remove('sidebar--open'))position: fixed; width: 100vw; height: 100vh; touch-action: manipulation;overflow: hiddenposition: fixed; top: 0;will-change: transform;display: nonearia-hidden="true"inertfocus()0.25s–0.35seasecubic-bezier(0.34, 1.56, 0.64, 1)linear