CSS实现左侧抽屉平滑折叠展开的核心是transform: translateX()配合transition，需用fixed/absolute定位、class控制状态、遮罩层防穿透、移动端适配touch和滚动，避免display/visibility导致跳变。

用 CSS transform 实现左侧抽屉的平滑折叠展开

核心是靠 transform: translateX() 移动抽屉容器，配合 transition 控制动画。不推荐用 display: none 或 visibility: hidden 切换，会导致 DOM 跳变、焦点丢失、无法过渡。

关键点：

• 抽屉容器需设 position: fixed 或 absolute，脱离文档流，避免影响主内容布局
• 初始状态设 transform: translateX(-100%)（完全左移），展开时改为 translateX(0)
• 主内容区需同步右移（如 transform: translateX(240px)），否则抽屉会盖在上面但点击穿透
• 务必加 will-change: transform 提升渲染性能，尤其在移动端

JavaScript 控制抽屉状态与 class 切换

别直接操作 style.transform，用 class 控制更清晰、易维护、支持 CSS 媒体查询响应式。

典型实现逻辑：

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

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

• 给 或根容器加一个 drawer-open class 表示展开态
• CSS 中写：.drawer-open .sidebar { transform: translateX(0); } 和 .drawer-open .main-content { transform: translateX(240px); }
• JS 里只做 document.body.classList.toggle('drawer-open')
• 记得监听 Escape 键关闭：document.addEventListener('keydown', e => e.key === 'Escape' && document.body.classList.remove('drawer-open'))

点击遮罩层关闭抽屉时的事件穿透问题

常见错误：遮罩层（.overlay）点击后抽屉没关，或者点了遮罩却触发了背后按钮。

原因和解法：

• 遮罩层必须有 background-color（哪怕 rgba(0,0,0,0.5)），否则 pointer-events 默认为 auto 但视觉不可见，容易误判
• 确保遮罩层 z-index 高于抽屉内容、低于抽屉本身（通常抽屉 z-index: 1000，遮罩 999）
• 遮罩点击处理函数里加 e.stopPropagation()，防止冒泡到 body 导致重复触发
• 移动端要额外处理 touchstart，iOS Safari 对 click 有 300ms 延迟

适配移动端时宽度与滚动行为的坑

抽屉在手机上常设为 240px 或 80vw，但用户滚动时如果抽屉内容过长，容易卡顿或无法滚动。

必须检查这几项：

• 抽屉容器加 overflow-y: auto，且高度设为 100vh（不是 100%），否则撑不满视口
• 禁用抽屉内部 touch-action: pan-y，否则 iOS 上下拖拽可能被浏览器拦截
• 展开时给 加 overflow: hidden，防止背景滚动；关闭时记得恢复（用 class 控制比 JS 直接改 style.overflow 更稳）
• 不要用 width: 100vw 做抽屉宽——滚动条存在时会多出一截，改用 width: 100% + max-width: 240px

抽屉看似简单，真正上线时最常出问题的是移动端 touch 事件响应、键盘焦点管理（比如按 Tab 键时焦点是否留在抽屉内）、以及 Safari 下 transform 动画偶尔掉帧——这些没法靠一次 class 切换解决，得实机反复测。