轻提示动效 · Toast Transition
英文：Toast Transition
动效与交互难度：入门 ★
🗣️一句话大白话
Toast 弹入弹出的动效：从底部/顶部滑入 + 淡入，停留后自动滑出。轻提示的“存在感”全靠动效。Toast 生命周期三阶段：弹入（滑入+淡入 250ms）→ 停留（3-4 秒）→ 弹离（滑出+淡出 200ms）。告诉 AI“Toast 从底部滑入、停留 3 秒自动滑出”即可。要点：弹入要轻快，别用弹簧（Toast 是轻量提示，存在感太强会喧宾夺主）；停留时长 = 文案长度 × 300ms 左右。
🎬真实场景
操作成功提示、错误提示、复制成功、消息通知
📮你可以这样说
「【图像模型版】[Toast] 从底部滑入+淡入（250ms），屏幕底部居中停留 3 秒后向下滑出+淡出（200ms）；多条时上下堆叠。 【HTML/CSS/JS 版】[Toast] 入场 translateY(16px)+opacity 0→1 250ms ease-out；setTimeout 3s 后反向 200ms；容器 fixed bottom + flex 列堆叠。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：Toast=通知中心；Toast 是短暂浮层，3-4 秒自动消失
- ▸带操作按钮的 Toast 停留要更长（5s+）
🚫什么时候别用
- ✗重要且需要用户处理的错误（用弹窗）
- ✗长文本通知
🧩常见变体
底部滑入顶部滑入带操作按钮堆叠
💡小贴士
- ✦弹入轻快别弹簧；停留时长 ≈ 文案字数 × 300ms
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系
🔗相关术语
📌素材来源
词条内容参考自 Adrian Punk（X @AdrianPunk115）· WayToAGI 转载 的「《Vibe Coding 网页动效词典（下篇）》」，已按项目「大白话 + 双通道提示词」体例改写与补充。查看原文 ↗