抽屉滑入
Drawer Slide
别名:抽屉滑入侧滑面板侧边栏滑出底部抽屉滑出层
这是什么
面板从屏幕边缘（常为右侧或底部）滑入并带遮罩，像从抽屉里拉出来。 转场方向即空间隐喻：从边缘滑入表示"叠加的临时层"， 关闭时原路滑回，保持心智模型不换。
交互实验室
试一试，再决定怎么用正在加载演示…
✓ 适用场景
- 移动端筛选、设置、详情等次级内容
- 需要保留主页面上下文的侧边操作
- 底部抽屉（bottom sheet）承载移动端快捷操作
✕ 不适用场景
- 不可跳过的强制任务（抽屉可随手关掉）
- 内容复杂需要大空间（改用整页或 modal）
- 滑入动画超过 300ms（等待感明显）
常见形式
右侧滑入
Right sheet
X 轴位移，桌面端最常见
底部抽屉
Bottom sheet
Y 轴上滑，移动端标准形态
遮罩渐变
Scrim fade
遮罩与面板同步淡入，加深层次
实现要点
transform: translateX/Ycubic-bezier(0.32, 0.72, 0, 1)scrim opacitytransform-only (no reflow)面板 transform 从 translateX(100%)（或 translateY(100%)）到 0，260～300ms， 材料系抽屉曲线 cubic-bezier(0.32, 0.72, 0, 1)；关闭方向相反。 遮罩 opacity 0→1 同步。 只动 transform/opacity 不引起回流；打开时锁 body 滚动并管理焦点与 Esc 关闭。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
为项目添加抽屉滑入转场（右侧筛选抽屉）。 先检查现有 drawer/modal 组件，复用其焦点与滚动锁定逻辑。 要求： - transform 滑入 260～300ms，材料抽屉曲线 - 遮罩同步淡入，Esc/遮罩点击可关 - 只动 transform/opacity，无布局位移 - 尊重 prefers-reduced-motion（改为淡入淡出） - 不引入新依赖 完成后运行现有检查，说明修改文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
从屏幕边缘（多为右侧或左侧）滑入、通常带遮罩的面板。比模态框轻：能承载较长内容又不离开当前页面， 关闭后原样回到上下文；移动端常以左滑导航或底部抽屉的形式出现。
组件应用于覆盖在页面之上、带半透明遮罩的对话框，打断用户当前流程，要求先完成弹窗内的任务或决策。 遮罩阻断与底层页面的交互，焦点被暂时困在弹窗内，是容器类浮层中打断程度最高的一种。
组件应用于固定在页面一侧（通常左侧）的垂直导航区，承载产品的主要层级入口。 后台管理系统的事实标准：顶部放品牌与全局搜索，侧边栏放模块树，内容区专注任务。
组件应用于点击触发元素后在其旁边弹出的非模态浮层，可承载文字说明、小型表单、日期选择等中等复杂内容。 无遮罩、不阻断页面其余部分，点击外部区域或 Esc 即关闭。
组件应用于