Page Transition
页面切换过渡
Aliases:页面转场切换动画页面跳转动画转场效果路由过渡page switch animation
What is it
When navigating, the outgoing page slides or fades away while the incoming one arrives — turning a hard cut into 200–400ms of continuous motion. Direction should mirror hierarchy: pushing left to go deeper, exiting right to go back, building a spatial mental model.
Interactive playground
Try it. Make an informed choice.Loading demo…
✓ When to use
- SPA route changes, step wizards, tab-like flows
- When parent-child hierarchy between pages matters
- Web products aiming for a native-app feel
✕ When not to use
- Transitions beyond 300ms — they drag the browsing rhythm
- Rapid back-and-forth navigation — animation lags the clicks
- Traditional MPAs with full reloads — nothing to animate between
Variants
Push
推入
New page pushes in from the right — expresses depth
Cross-fade
淡入淡出
Both pages cross-fade — neutral, directionless
Shared axis
共享轴
Material's paired same-axis enter/exit
Implementation
transform: translateXopacitytransitionMinimal recipe: on navigation give the outgoing page an "exit" class (translateX(-30%) + opacity:0) and animate the incoming one from translateX(30%) to 0 over 250–300ms ease-out. The modern route is the View Transitions API — wrap the router update in document.startViewTransition for a cross-fade you can restyle per direction in CSS. Respect prefers-reduced-motion.
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 page transitions to the current SPA's route changes. Confirm the routing setup and page container structure first. Requirements: - Opposing slide-and-fade directions for forward/back, 280ms ease-out - No glitchy overlap during rapid successive navigations - No transition on first load - Respect prefers-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 panel slides in from a screen edge — usually right or bottom — over a scrim, like pulling out a drawer. Direction carries the spatial metaphor: entering from the edge marks it as a temporary layer, and it exits back the same way, keeping the mental model intact.
MotionSimilarA dialog rendered above the page with a translucent backdrop that interrupts the current flow and demands a task or decision first. The backdrop blocks interaction with the underlying page and focus is temporarily trapped inside — the most disruptive of the overlay containers.
ComponentsApplies toA row of switchable labels that divide one region into mutually exclusive views: the tab headers stay visible and clickable, and only the active tab's panel shows while the rest stay hidden. Packs several tightly related contents into one area to switch in place instead of full-page navigation. Arrow-key navigation between tabs makes it a classic accessibility showcase.
ComponentsApplies toA 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.
MotionSimilar