最稳妥的手机端侧边栏折叠方案是使用 transform: translateX() 配合 transition 实现丝滑动画，配合 overflow-x: hidden、will-change: transform、backface-visibility: hidden 及结构化遮罩与主体位移。

手机端侧边栏用 transform: translateX() 折叠最稳妥

直接用 display: none 或 visibility: hidden 会打断 transition 动画，导致折叠/展开“闪一下”或完全无动画。必须靠 transform 移动位置 + transition 控制变化过程，才能保证丝滑。

关键点是：侧边栏默认在视口内（transform: translateX(0)），收起时移出屏幕左侧（transform: translateX(-100%)），同时父容器设 overflow-x: hidden 防止横向滚动条出现。

• 用 translateX(-100%) 而不是 left: -100% —— 后者触发布局重排，性能差；transform 只触发合成，GPU 加速
• 过渡时间建议设 transition: transform 0.3s ease-in-out，太短不易察觉，太长拖沓
• 务必给侧边栏加 will-change: transform（可选但推荐），提前提示浏览器该元素将频繁变换

HTML 结构要支持“遮罩层”和“主体位移”

纯靠侧边栏自身 transform 不够：手机端点击遮罩关闭、主体内容需右移腾出空间、避免背景内容被误点——这些都得靠结构配合。

典型结构是三层：外层 body 或 main 包裹 sidebar + content + overlay（遮罩）。

Android Remote Control

远程控制 Android 设备，支持截图、自动化操作手机 App 等功能。本应用使用 uiautomator2 作为底层框架，通过 ADB 连接设备，用户无需 Root（1）查看手机屏幕；（2）自动化操作手机 App；（3）远程安装/卸载应用……

下载

立即学习“前端免费学习笔记（深入）”；

• overlay 必须设 position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 99;
• content 在侧边栏展开时需同步右移（transform: translateX(240px)），否则会被遮挡；注意这个值要和侧边栏宽度一致
• 所有可交互元素（如按钮、链接）在折叠状态下，应设 pointer-events: none 给 overlay，再用 pointer-events: auto 恢复，避免穿透点击

JavaScript 控制 class 切换比内联 style 更可控

别用 element.style.transform = 'translateX(-100%)'，这样难维护、难调试、CSS 里写死的 transition 也可能失效。统一用 class 控制状态更清晰。

• 定义两个 class：.sidebar-open（transform: translateX(0)）和 .sidebar-closed（transform: translateX(-100%)）
• 监听按钮点击，切换 document.body 或侧边栏父容器的 class，例如：document.body.classList.toggle('sidebar-active')
• 用 CSS 选择器联动：.sidebar-active .sidebar { transform: translateX(0); } 和 .sidebar-active .content { transform: translateX(240px); }
• 记得在 transitionend 事件里清理 class（比如移除临时 is-transitioning），防止快速连点导致状态错乱

兼容性与移动端细节不能漏

iOS Safari 对 transform 的渲染有时有延迟，尤其嵌套 position: fixed 元素时；Android Chrome 旧版本对 will-change 支持不一。这些不是理论问题，是真实卡顿来源。

• 给侧边栏加 backface-visibility: hidden，强制开启硬件加速，iOS 上效果明显
• 避免在侧边栏内部用 position: fixed，改用 position: sticky 或 JS 滚动监听模拟
• 触摸设备上，收起后要主动 focus() 回主按钮或 body，否则键盘焦点可能卡在不可见元素上，影响无障碍访问
• 媒体查询断点建议用 @media (max-width: 768px)，而不是 max-device-width —— 后者在桌面浏览器缩放时失效

侧边栏折叠看似只是动一下位置，但涉及渲染管线、事件流、焦点管理、无障碍等多个层面。最容易忽略的是遮罩层的 pointer-events 和 iOS 上的 backface-visibility，这两个点一漏，用户第一感觉就是“卡”或“点不关”。