轻提示
Toast
一条短消息从屏幕边缘滑进来，几秒后自己消失，不打断当前操作。
- 又叫：
- 轻提示
- 消息提示条
- 浮层提示
- 自动消失的提示
- toast notification
- snackbar
- 展厅
- 交互反馈
- 形态
- 固定舞台
- 播放
- 手动触发
- 关键词
- 需要 JS / 有状态 / 合成层动画 / 可以直接用
参数工作台
复制给 AI
随参数实时更新做一个轻提示（toast）组件：触发后从底部居中滑入，滑入距离 12px，入场 220ms ease-out，停留 3000ms 后自动消失。容器用 role="status" 和 aria-live="polite"，多条时纵向堆叠、最多同时 3 条。动画只用 transform: translateY 和 opacity，禁用状态别遮挡页面操作。系统减少动态效果时直接出现和消失。
toast / snackbar component, slides in from 底部居中, translateY(12px) with 220ms ease-out, auto-dismiss after 3000ms, role="status" aria-live="polite", stack up to 3 toasts, animate transform + opacity only, non-blocking, no entry/exit animation under prefers-reduced-motion
https://publieople.github.io/design-museum/entry/toast/?stage=light
链接带着你调好的参数
什么时候用
- 一次操作成功或失败，给一句话的确认，不用用户做决定
- 配合撤销（undo），比如「已删除 · 撤销」
- 后台任务完成时提醒一下，用户当时可能在别处
适用场景：按钮 / 表单 / 页面
推荐取值
- 停留时长
- 3–5s
- 入场时长
- 200–300ms
- 同时最多
- 3 条
- 宽度
- 280–420px
- 位置
- 底部居中或右上角
别搞混
和「模态弹窗（modal）」的区别
modal 挡住页面、必须处理才能继续；toast 不阻塞、会自动消失，所以不能把必须被看到的严重错误只放进 toast。
和「字段内联校验」的区别
表单错误要贴在出错字段旁边并保持可见，直到用户改对；toast 在角落且会消失，不适合报字段级错误。
容易踩的坑
- 自动消失的提示不能用 aria-live="assertive"，会打断读屏；用 role="status" 或 aria-live="polite"
- 停留时间少于 3 秒读不完，超过 6 秒又挡视线，3–5 秒比较合适
- 多条 toast 要堆叠并限制数量（最多 3–4 条），否则会铺满屏幕
- 不能只靠颜色区分成功和失败，要有图标或文案；也不能让 toast 成为唯一的信息来源
无障碍降级
prefers-reduced-motion: reduce 下取消入场和退场的位移与淡出，直接出现、直接消失，停留时长保持不变。
关键词
- toast
- snackbar
- aria-live
- role="status"
- auto-dismiss
- transform: translateY