动画 · 反馈 · 18
Toast 通知
Toast 通知 = 从边缘滑入、停留片刻再离开的小确认,确认操作而不挡屏。
直达修改 Prompt →
尊重 prefers-reduced-motion:动画关闭,仅保留终态。
Toast 通知是什么?
Toast 在不抢占焦点的情况下确认某事——从边缘滑入、停留到能读完、再悄悄退场。动效只是一次位移加一次淡入,真正重要的是节奏(进、停、出),而非缓动。短一点、别挡主内容。
动画 标本
- 触发
- click
- 技术
- css
- 时长
- 3s
- 缓动
cubic-bezier(0.16, 1, 0.3, 1) - 性能
- transform, opacity
什么时候用
- Save / send / copy confirmations
- Non-blocking status after an action
什么时候别用
- For errors that need a choice — use a dialog
- Stacked with more than 3 at once
The hold is the message. Too short and nobody reads it; too long and it nags.
Show a toast: translateY + fade in, hold, then fade + drop out, transform and opacity only.