Shared Element Transition
共享元素转场
Aliases:共享元素转场元素飞入详情卡片放大成页面无缝转场hero 动画
What is it
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.
Interactive playground
Try it. Make an informed choice.Loading demo…
✓ When to use
- List to detail — photos, cards, products
- Selection flows where "it's the same item" matters
- Media browsing — galleries, files, previews
✕ When not to use
- Very different layouts — the flight path distorts
- Large media transitions on weak devices — jank breaks the illusion
- Durations past 400ms — users start waiting
Variants
Container transform
容器变换
The card grows into the detail container — Material 3 standard
Hero image
主图飞行
Only the image flies; the rest fades in
Fallback
退化淡切
Falls back to a crossfade when unsupported
Implementation
FLIP techniqueview-transition-namegetBoundingClientRecttransform-onlyFLIP — record the element's first getBoundingClientRect, switch views, measure the last rect, invert the transform back to the start, then play to zero. Modern web option — the View Transitions API (document.startViewTransition + view-transition-name). Keep it to 250–400ms; with prefers-reduced-motion switch instantly.
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 a shared element transition from list to detail in the project. Check the routing/view switching and existing transitions first; pick FLIP or View Transitions. Requirements: - Continuous element motion, 250–400ms, transform/opacity only - Return via the same path on close; crossfade fallback when unsupported - Preserve scroll position and focus management - 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
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.
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 self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsApplies toA summary list on one side with the selected item's full detail on the other; clicking an entry updates the detail pane instantly. It solves the constant back-and-forth between list and detail pages — overview and depth share one screen, so users keep their sense of place and switching or comparing multiple items becomes cheap.
PatternsUsed with