Toast Slide-in
提示滑入
Aliases:消息提示滑入弹出提示toast 动画通知滑入底部提示浮现
What is it
A short notice slides in from a screen edge — bottom or top-right — lingers a few seconds, then slides back out. Three phases: enter, hold, exit; it always returns toward the edge it came from.
Interactive playground
Try it. Make an informed choice.Loading demo…
✓ When to use
- Lightweight results — saved, failed, undone
- Async completions that must not interrupt
- Undo windows ("Message archived — Undo")
✕ When not to use
- Must-act information — use an alert or modal
- Several long toasts stacked — they expire before reading
- Critical errors — toasts get missed; make them recoverable
Variants
Bottom-up
底部浮现
The mobile standard — slides up via translateY
Top-right
右上角滑入
Desktop notification favourite — slides in via translateX
Auto-dismiss
自动消失
Holds 3–5s then exits in reverse
Implementation
transform: translateY/Xease-out enterauto-dismiss timeraria-live: politeEnter with transform from translateY(16px) (or X 24px) plus opacity 0 to visible over 200–250ms ease-out; hold 3–5s, then exit in reverse over 150–200ms. Give the container aria-live="polite", pause the timer on hover, and respect prefers-reduced-motion with a pure crossfade.
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Add slide-in toast feedback for operation results. Check existing toast/notification components first; reuse their queue and timer logic. Requirements: - Enter 200–250ms ease-out, exit in reverse 150–200ms - Auto-dismiss after 3–5s; pause the countdown on hover - aria-live announcements; crossfade fallback under reduced-motion - No new dependencies Run existing checks when done and list modified files. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
A small message bar that appears in a viewport corner and dismisses itself, reporting an operation result (saved, copied, upload done). Non-blocking, usually with one action (undo, view), lingering for about 3–5 seconds before fading out.
ComponentsApplies toAn inline, status-coloured banner inside the page flow for messages that must be seen: errors, warnings, important notices. It takes layout space instead of overlaying, and stays until the issue is resolved or the user dismisses it.
ComponentsApplies toHandles risky actions with "apply first, allow regret": deletions take effect immediately and show the result, while a snackbar with a countdown offers one-tap undo until the timer expires. Unlike confirmation dialogs it never interrupts the flow, and unlike a single confirm it leaves a real window to change one's mind.
PatternsUsed withUpdate the interface immediately as if the operation will succeed while the real request runs in the background; settle on success, roll back to the original state with a notice on failure. It solves the "wait for the server on every action" problem — trading brief uncertainty for a zero-latency feel, ideal for frequent light actions like likes and bookmarks.
PatternsUsed with