Page Transition
Automatic fade transition on every SPA navigation. Zero-config, SSR-aware, and requires no changes to individual pages.
How it works
PageTransition subscribes to NavigationManager.LocationChanged and uses a Blazor key to re-mount its content on each navigation, triggering Motion's OnAppear animation.
1 — First load
Content appears instantly. Animations are suppressed during SSR, prerendering, and hydration.
2 — URL changes
LocationChanged fires. The render key flips to the new URI, unmounting the old content.
3 — New content animates in
Motion plays the configured fade (and optional slide) as the new content mounts.
Basic usage
Wrap the layout Body in your MainLayout inside RenderStateProvider. That's all that's needed.
With slide
EnableSlide adds an upward drift on top of the fade, giving a subtle lift feel.
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
Duration | double | 0.25 | Transition duration in seconds |
FromOpacity | double | 0 | Starting opacity (0–1) |
ToOpacity | double | 1 | Ending opacity (0–1) |
EnableSlide | bool | false | Add an upward slide on top of the fade |
SlideDistance | int | 10 | Slide distance in pixels (used when EnableSlide is true) |
DisableAnimation | bool | false | Suppress all animations |
Class | string? | — | CSS classes applied to the wrapper element |
RenderContext | AppRenderContext? | Cascaded | Provided automatically by RenderStateProvider |
PageTransition vs ScreenTransition
Two complementary tools — use them together.
PageTransition
- Automatic — fires on every URL change
- Lives in MainLayout, wraps @Body
- Fade only (+ optional slide up)
- No direction concept
ScreenTransition
- Manual — parent sets Direction + Key
- Lives inside a shell component
- Tab (fade) / Push (→) / Pop (←)
- For mini-apps and nested navigation