滑入滑出 · Slide
英文：Slide
动效与交互难度：入门 ★
🗣️一句话大白话
元素从某个方向位移进场或离场。方向感明确——从哪来、到哪去，是"空间叙事"的基础。slide 要告诉 AI 三件事：方向（左/右/上/下）、距离、缓动。抽屉从右滑入、Toast 从下弹起、区块从侧向进入。方向反了会显怪（弹窗从上往下滑不自然）。距离默认写"320px"或"100% 视口"都可以，说清即可。
🖼️样图参考
🎬真实场景
抽屉、Toast、移动端菜单、侧边面板、区块入场
📮你可以这样说
「【图像模型版】让 [抽屉] 从右侧滑入：位移 320px 到 0，时长 300ms，先快后慢；关闭时向右侧滑出略快。 【HTML/CSS/JS 版】[抽屉] 用 transform: translateX(100%)→0 入场，300ms ease-out；离场 translateX(100%) 240ms。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：slide 只是位移；方向必须与语义对齐（右侧面板=从右来）
- ▸方向与边缘不对齐会显怪
🚫什么时候别用
- ✗无方向语义的轻提示（用 fade）
🧩常见变体
右侧滑入（抽屉）下侧弹起（Toast）左右切换（轮播）
💡小贴士
- ✦面板从哪侧出现就贴哪侧边缘，方向一致才自然
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系
🔗相关术语
📌素材来源
词条内容参考自 Adrian Punk（X @AdrianPunk115）· WayToAGI 转载 的「《Vibe Coding 网页动效词典（上篇）》」，已按项目「大白话 + 双通道提示词」体例改写与补充。查看原文 ↗