What they are
Route transitions animate the change from one view to another, such as a fade or slide. They make navigation feel continuous instead of a hard cut.
The challenge
During a transition both the outgoing and incoming views may exist at once. The router must keep the old view alive until the new one is ready, then animate the swap and remove the old tree.
- Mark the navigation as pending while the new route loads.
- Optionally keep the current page interactive during the wait.
- Coordinate enter and leave animations so they do not overlap badly.
Accessibility
Respect the reduced motion preference and avoid trapping focus mid animation. Move focus to the new view heading once the transition settles so keyboard and screen reader users are oriented.
Why it matters
Smooth transitions communicate spatial relationships between pages, but only if they stay fast and never block the user from acting.
Key idea
Route transitions overlap outgoing and incoming views during a pending navigation, while respecting reduced motion and focus.