transition:name
The transition:name directive gives an element a stable identity so it animates between pages with view transitions.
Syntax
<img transition:name="hero" />Examples
---
// shared name on the list page and the detail page
---
<img src={cover} transition:name={`cover-${post.id}`} alt="" />
Output
The cover image smoothly morphs from the list thumbnail to the detail hero during client-side navigation.
Notes
Elements sharing the same transition:name on two pages are paired by the View Transitions API. Names must be unique per page. Enable the ClientRouter (formerly ViewTransitions) component for cross-page animation.