提示滑入
Toast Slide-in
别名:消息提示滑入弹出提示toast 动画通知滑入底部提示浮现
这是什么
操作结果以一条短提示从屏幕边缘滑入（常为底部或右上角）， 停留数秒后自动滑出。 动效分三段：滑入—停留—滑出， 方向与来源一致——从边缘来，回边缘去。
交互实验室
试一试，再决定怎么用正在加载演示…
✓ 适用场景
- 操作成功、失败、已撤销等轻量结果反馈
- 不打断当前任务的异步完成通知
- 配合撤销操作的短时窗口提示
✕ 不适用场景
- 必须处理的信息（改用 alert 或 modal）
- 同屏堆叠多条长文本（读不完即消失）
- 关键错误（toast 易被错过，需可恢复方案）
常见形式
底部浮现
Bottom-up
移动端标准，translateY 滑入
右上角滑入
Top-right
桌面端通知常见，translateX 滑入
自动消失
Auto-dismiss
停留 3～5s 后反向滑出
实现要点
transform: translateY/Xease-out enterauto-dismiss timeraria-live: polite入场 transform 从 translateY(16px)（或 X 24px）+ opacity 0 到可见，200～250ms ease-out； 停留 3～5s 后反向滑出 150～200ms。 容器加 aria-live="polite" 播报内容； 悬停时暂停倒计时；尊重 prefers-reduced-motion 改为纯淡入淡出。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
为项目操作结果添加 toast 滑入反馈。 先检查现有 toast/通知组件，复用其队列与计时逻辑。 要求： - 入场 200～250ms ease-out，出场反向 150～200ms - 停留 3～5s 自动消失，hover 暂停倒计时 - aria-live 播报，reduced-motion 降级为淡入淡出 - 不引入新依赖 完成后运行现有检查，说明修改文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
在视口角落短暂出现、自动消失的小消息条，用来告知操作结果（已保存、已复制、上传完成）。 不打断当前流程，通常附一个操作入口（撤销、查看），停留约 3~5 秒后淡出。
组件应用于嵌在页面流内、带状态色底色的横条，用于必须被看见的消息：错误、警告、重要通知。 它占据文档流而不是覆盖内容，通常常驻直到问题被处理或用户手动关闭。
组件应用于用"先执行、给反悔窗口"的方式处理高风险操作：删除等动作立即生效并展示结果，同时在底部弹出 带倒计时的撤销条，窗口期内一键恢复，倒计时结束才真正提交。相比弹窗确认，它不打断操作流， 又比"确认一次就完"的弹窗多了一层真正可用的后悔药。
交互模式搭配使用用户操作后立即按"预计成功"更新界面，真实请求在后台进行，成功则落定， 失败则回滚到原状态并提示。它解决的是"每个操作都要转圈等服务器"的问题—— 用短暂的不确定换取零等待的流畅感，特别适合点赞、收藏这类高频轻操作。
交互模式搭配使用