View Transitions

Wrap page content with with_view_transition for per-route boundaries. NavLink SPA navigation uses the View Transitions API automatically.

Docs site wiring

This documentation app wraps layout Slot content in with_view_transition(path_slug, …) and styles ::view-transition-old/new(root) in site CSS — try the sidebar or the demo above.

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.