抽屉过渡 · Drawer Transition
英文：Drawer Transition
动效与交互难度：入门 ★
🗣️一句话大白话
抽屉（侧边面板）从边缘滑入滑出的动效。方向固定：从哪侧来就贴哪侧边缘。抽屉动效 = 面板 translateX(100%→0) + 遮罩淡入，与弹窗不同在“方向性”。告诉 AI“右侧抽屉从右滑入 300ms、遮罩同步淡入”即可。要点：面板与遮罩同节奏；关闭时反向滑出更快；滑入距离要与面板宽度一致（100% 或固定 px）。
🎬真实场景
侧边菜单、购物车侧栏、筛选面板、设置抽屉
📮你可以这样说
「【图像模型版】[右侧抽屉] 从右边缘滑入：面板位移 100%→0，遮罩同时淡入，300ms 先快后慢；关闭时向右滑出 240ms。 【HTML/CSS/JS 版】[抽屉] transform: translateX(100%)→0，300ms ease-out；遮罩 opacity 0→1 同步；关闭 translateX(100%) 240ms。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：抽屉=弹窗；抽屉是“贴边缘滑入”，弹窗是“居中放大”
- ▸面板滑入方向与所在边缘不一致会显怪
🚫什么时候别用
- ✗无明确边缘语义的居中面板（用弹窗过渡）
🧩常见变体
右侧滑入左侧滑入底部上滑
💡小贴士
- ✦面板与遮罩同节奏；滑入距离 = 面板宽度
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系
🔗相关术语
📌素材来源
词条内容参考自 Adrian Punk（X @AdrianPunk115）· WayToAGI 转载 的「《Vibe Coding 网页动效词典（下篇）》」，已按项目「大白话 + 双通道提示词」体例改写与补充。查看原文 ↗