跳到正文
UIGrammer
EN 中文

动画 · 反馈 · 18

Toast 通知

Toast 通知 = 从边缘滑入、停留片刻再离开的小确认,确认操作而不挡屏。

直达修改 Prompt

Saved

尊重 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.