Feedback & Interaction · What a tap feels like
Toast提示条
- up from below
- holds
- out of the way
A notice slides up from the bottom edge, holds long enough to read, then slides back out. Three numbers decide whether it works: 260ms in (you should see it arrive), 2400ms hold (long enough to read), 160ms out (leaving needs no ceremony).
When to use it
Use it to confirm something succeeded without interrupting: saved, copied. Never use it for anything requiring a decision — it disappears on its own, possibly before it is read. That is what a dialog is for.
Parameters
transform: translateY 24px→0 · opacity 0→1 · 260ms ease-out · hold 2400ms · exit 160ms ease-in
Recipe
Toast → transform: translateY 24px→0 · opacity 0→1 · 260ms ease-out · hold 2400ms · exit 160ms ease-in
One sentence for your AI
Build a toast: slide from translateY(24px) to 0 while opacity goes 0 to 1, over 260ms ease-out; hold for 2400ms; then slide back to 24px and fade out over 160ms ease-in. The lopsided durations are deliberate — arriving needs to be seen, leaving needs to be quick.