← Back
Edit Post
Title
Description
Page-level enter/exit animations, shared element transitions with name + share="morph".
Content
Markdown supported
# View Transitions React 19's `<ViewTransition>` enables smooth animations between route changes. ## Page-Level Transitions From `app/[slug]/page.tsx`: ```tsx import { ViewTransition } from 'react'; export default async function BlogPostPage({ params }) { return ( <ViewTransition enter="slide-from-right" exit="slide-to-right"> <article>...</article> </ViewTransition> ); } ``` ## Shared Element Transitions From `app/dashboard/_components/PostList.tsx`—connect elements across pages with the same `name`: ```tsx <Link href={`/dashboard/${post.slug}`}> <ViewTransition name={`post-card-${post.slug}`} share="morph"> <Card>{post.title}</Card> </ViewTransition> </Link> ``` The card morphs into the detail page when navigating. ## Browser Support Uses the browser's native View Transitions API. In unsupported browsers, navigation works normally—progressive enhancement.
Published
Save Changes
Cancel