最简方案是用 transform: translatex(-280px) 和 translatex(0) 配合 transition 实现 drawer 弹出，需设固定宽度、position: fixed、body overflow: hidden，并通过 class 切换控制状态，避免直接操作 style。

用 CSS transform 实现左侧 drawer 弹出最简方案

直接用 transform: translateX(-100%) 配合过渡动画，是兼容性好、无 JS 依赖、性能稳定的首选方式。不推荐用 left: -100% 或 margin-left，它们会触发重排，动画卡顿明显。

• 抽屉容器需设固定宽度（如 width: 280px），并加 position: fixed 和 top: 0; height: 100vh;
• 初始状态：设 transform: translateX(-280px)（数值必须和 width 一致）
• 展开状态：设 transform: translateX(0)，配合 transition: transform 0.3s ease
• body 需临时加 overflow: hidden 防止滚动穿透（尤其 iOS Safari）

JavaScript 控制 drawer 开关的最小必要逻辑

只需一个布尔状态 + class 切换，避免操作 style 属性或反复 querySelector。别写成「点击时 setAttribute」或「document.getElementById(...).style.transform = ...」——这会让 CSS 动画失效且难以维护。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 给 drawer 元素加初始 class：class="drawer drawer--closed"
• 点击按钮执行：drawerElement.classList.toggle('drawer--closed')
• CSS 中定义：.drawer--closed { transform: translateX(-280px); }
• 确保按钮有 type="button"，防止表单意外提交

移动端 iOS 上 drawer 滑动关闭的坑

iOS Safari 对 transform + overflow: hidden 组合有渲染 bug：抽屉展开后，页面仍可横向拖动，导致内容错位。这不是“没加 viewport”或“没设 width”，而是 WebKit 的已知行为。

• 必须给 和 同时加 overflow-x: hidden
• 抽屉展开时，额外加 touch-action: none 到 body，禁用默认手势干扰
• 若要支持手势滑动关闭，别用 touchstart/move 手动计算位移——改用 hammer.js 或原生 PointerEvent + getBoundingClientRect() 做边界判断，否则 iOS 会抢走 touch 事件

Vue/React 里复用 drawer 组件的关键点

抽屉不是独立页面，它必须能响应父组件传入的 open 状态，并在关闭时触发回调。别把 v-model 或 useState 写死在组件内部——那等于锁死了调用方式。

• Vue：接收 modelValue prop，用 defineEmits(['update:modelValue']) 同步开关
• React：接收 open 和 onClose，关闭时调用 onClose()，而非 setState
• 都必须支持 slot / children 注入内容，且抽屉内元素不继承父级 z-index
• 别忘了加 aria-hidden 和 inert 属性控制可访问性，展开时主内容区域需设 aria-hidden="true"

实际项目里最容易被忽略的是焦点管理：用户按 Tab 键时，焦点不该留在抽屉外的按钮上，也不该跳进已关闭的 drawer。这需要手动 trap focus —— 而不是等框架库帮你补。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！