最稳妥的手机端侧边栏折叠方案是使用 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（遮罩）。
立即学习“前端免费学习笔记（深入）”；
-
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，这两个点一漏，用户第一感觉就是“卡”或“点不关”。 
