View Transitions

Wrap page content with with_view_transition for smooth animated navigation using the View Transitions API.

Page wrapper

pub fn page(_req: FlowRequest) -> View {
    with_view_transition(
        "home",
        vec![Child::View(view! {
            <article class="page">
                <h1>"Home"</h1>
                <p>"Content animates on navigation."</p>
            </article>
        })],
    )
}

Unique transition names

Use a distinct name per route (e.g. home, about) so the browser can cross-fade between pages.

CSS

::view-transition-old(root) {
    animation: fade-out 200ms ease;
}
::view-transition-new(root) {
    animation: fade-in 200ms ease;
}

Fallback

Browsers without View Transitions support render content normally — no polyfill required.