纯 HTML + CSS 无法实现真正可用的侧边抽屉，必须用 JavaScript 控制类名或 data-state；推荐结构为 dialog 元素（降级用 div[role="dialog"]），配合 aria-modal、transform 动画及完整关闭链路（遮罩、Esc、焦点管理）。
点击按钮后如何用纯 HTML + CSS 实现侧边抽屉？
纯 HTML + CSS 做不了真正意义上的“详情抽屉”——因为抽屉的展开/收起需要状态切换，而原生 HTML 没有状态管理能力。details 元素只能做垂直折叠，不支持侧边滑出；checkbox + label + :checked 伪类可以模拟，但交互受限（比如无法点击遮罩关闭、不支持动画中断、无过渡完成回调），实际项目中几乎没人用。
所以真实场景下，必须引入 JavaScript 控制类名或内联样式。面试时被问到“不用框架怎么做”，重点不是炫技，而是说清取舍和边界。
-
details只适合简单折叠面板，不满足“侧边抽屉”视觉与交互要求 - 仅靠
:checked+~选择器能实现基础开关，但无法监听关闭动作、不能响应 Esc 键、移动端手势支持为零 - 真正可用的最小实现 =
HTML结构 +CSS动画 +JS切换open类或data-state
抽屉 DOM 结构怎么组织才利于控制和可访问性？
结构松散或语义错乱会导致键盘导航失败、屏幕阅读器读不出“这是详情抽屉”，也增加 JS 绑定难度。推荐用 dialog 元素作为根容器（Chrome 97+ 支持，Safari 15.4+ 支持），降级方案用 div[role="dialog"]。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 抽屉容器必须有
aria-modal="true"和aria-labelledby（指向标题 ID） - 打开时给
加overflow: hidden防止背景滚动 - 关闭按钮需有
aria-label="关闭详情"，且放在抽屉内部靠右上角 - 用
inert属性或aria-hidden="true"禁用主内容区域焦点（注意：IE 不支持inert，得用 JS 手动移除 tabindex）
CSS 动画怎么写才能顺滑且不卡顿？
侧边抽屉最常犯的性能错误是用 left 或 margin-left 触发重排（layout），导致动画掉帧。正确做法是只用 transform: translateX() + opacity，这两者由合成器处理，不触发重排重绘。
示例关键 CSS：
.drawer {
position: fixed;
top: 0;
right: 0;
width: 360px;
height: 100vh;
background: white;
transform: translateX(100%);
opacity: 0;
transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.2s;
}
.drawer.open {
transform: translateX(0);
opacity: 1;
}
- 别用
display: none/block控制显隐——它会中断 transition，且无法做入场动画 - 务必加
cubic-bezier(0.2, 0, 0.2, 1)，这是 Material Design 推荐的“减速曲线”，比ease-out更自然 - 移动端要加
will-change: transform（仅在 open 状态下加），提示浏览器提前准备图层
JavaScript 关闭逻辑容易漏掉哪几个细节？
很多人只写了点击按钮打开、点击关闭按钮关闭，结果面试官一按 Esc 就露馅。完整关闭链路必须覆盖：
- 点击遮罩层（
.drawer-overlay）关闭 - 按下
Escape键关闭（监听keydown，判断e.key === 'Escape'） - 抽屉打开时，焦点自动移到第一个可聚焦元素（如标题或关闭按钮），否则键盘用户无法操作
- 关闭后，焦点必须回到触发按钮（用
triggerButton.focus()），否则焦点丢失 - 如果抽屉里有表单，按 Enter 提交时默认不应关闭抽屉——得阻止默认行为或加条件判断
这些不是“加分项”，是可访问性和基础体验的底线。没处理好，用户可能根本没法用键盘关闭抽屉，尤其对视障开发者来说就是不可用。
