MotionMotion / Navigation

View Transition

视图过渡

Aliases:视图过渡页面过渡动画切换动画换页过渡view transitionview transitions api

What is it

A browser-native transition between page states via the View Transitions API: the old view fades out, the new one fades in, and key elements can morph as shared targets. It hides the jump inside continuous spatial narrative so "a new screen" reads as "one step over" rather than a hard cut.

Interactive playground

Try it. Make an informed choice.

Loading demo…

✓ When to use

In-document state or route changes needing continuity — list to detail
Key elements that should persist visually — titles, images, buttons
Target browsers already support the View Transitions API

✕ When not to use

Long animations on every hop — frequent navigation bogs down
Old and new views differ wildly — morphing distorts content
Must support no-API environments without a fallback path

Variants

Cross-fade

交叉淡入

Old fades out, new fades in — the safe default

Slide

滑动

Push in/out along the navigation axis — clear forward/back semantics

Shared-axis

共享轴

Shared elements morph in place; the rest moves along an axis

Implementation

@keyframesopacitytransform: translateview-transition-name

The native path calls document.startViewTransition(() => updateDOM()) and assigns view-transition-name to elements that should morph. Without the API fall back to CSS animation: the old view fades or slides out as the new one enters, all durations written calc(<duration> * var(--demo-speed, 1)). Respect prefers-reduced-motion by cutting instantly.

Platform API

document.startViewTransition()view-transition-name

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.

Style

Dark mode supportRespect prefers-reduced-motionNo new dependenciesRun existing checks and list modified files

Implement view transitions in the current project.

Inspect the existing component system and design tokens first; reuse existing components.
Keep the project's visual style. Add no unnecessary dependencies.
Requirements:
- State or route changes transition continuously, with key elements staying visually continuous
- CSS fallback when the View Transitions API is missing
- All animation durations written calc(<duration> * var(--demo-speed, 1))
- Respect prefers-reduced-motion
Run existing project checks when done and list the 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

Page Transition页面切换过渡

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.

MotionAlternative

Shared Element Transition共享元素转场

A thumbnail in a list "flies" into the hero of the detail view — the same element moving continuously across two states instead of both views fading. Identity stays continuous through the transition: the strongest form of context preservation.

MotionSimilar

Morphing Icon图标变形

One icon smoothly morphs between two states instead of being swapped — classically the hamburger turning into a close X. Built from the same strokes rotating, translating and fading, it says "same control, new state".

MotionUsed with

Sources

Markdown for agents · JSON