<details>标签仅支持垂直折叠，无法实现侧边抽屉式动画；可通过max-height+transition模拟平滑展开，但受限于高度估算和交互功能缺失。
标签本身不支持侧边抽屉式动画，它只提供原生的垂直折叠能力。想用它“打造抽屉式交互效果”，必须明确一点：**Details 只能做折叠面板，不能做侧边滑入滑出的抽屉**。所谓“配合 CSS 动画”实现抽屉，其实是对标签能力的误读或强行扩展——CSS 无法给 `
` 添加 `transform: translateX()` 类似的侧向位移动画，因为它的展开/收起由浏览器内核控制，`open` 状态切换时没有过渡钩子，也无法监听动画帧。
但你可以用它快速实现语义清晰、无障碍友好、零 JS 的垂直方向内容抽拉效果，再通过 CSS 做视觉增强：
- 给
<summary>加图标和悬停反馈 - 用
max-height+transition模拟平滑展开（需手动设固定高度上限） - 配合
overflow: hidden和opacity提升动效观感
例如：
<details class="drawer-vertical">
<summary>用户信息</summary>
<div class="drawer-content">
<p>姓名：张三</p>
<p>邮箱：zhangsan@example.com</p>
</div>
</details>对应 CSS：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
.drawer-vertical {
border: 1px solid #ddd;
border-radius: 4px;
}
.drawer-vertical summary {
padding: 12px 16px;
cursor: pointer;
font-weight: 600;
position: relative;
}
.drawer-vertical summary::after {
content: "▼";
float: right;
transition: transform 0.2s;
}
.drawer-vertical[open] summary::after {
transform: rotate(180deg);
}
.drawer-content {
padding: 0 16px 12px;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.3s ease-in-out, opacity 0.2s ease;
}
.drawer-vertical[open] .drawer-content {
max-height: 200px;
opacity: 1;
}这种写法优点是轻量、可访问、兼容性好（Chrome/Firefox/Safari/Edge 均支持），缺点也很明确：
立即学习“前端免费学习笔记（深入）”；
- 动画依赖
max-height估算值，内容超长会截断或突兀撑开 - 无法响应
Esc键关闭，也不能点击遮罩层收起 - 不支持手势拖拽、无滚动锚定、移动端体验较弱
如果项目需要真正的“侧边抽屉”（比如点击头像从左侧滑出用户菜单），就必须放弃 <details>，改用标准方案：
- HTML 定义结构（含
aria-label和role="dialog"） - CSS 控制
position: fixed、right: -100%、transform和transition - JavaScript 管理
open状态、键盘事件（Esc）、遮罩点击、焦点捕获
是好工具，但它不是万能钥匙。把它用在适合的地方——比如设置页的分组折叠、表单的高级选项、帮助文档的问答区——才能真正发挥语义与可用性的双重价值。
