Animated Route Transitions

Add smooth animations when navigating between routes.

Using AnimatedSwitch

The AnimatedSwitch component simplifies animated transitions:

Transition Modes

• 'out-in' (default) - Current route exits first, then new route enters
• 'in-out' - New route enters first, then current route exits
• 'default' - Both routes transition simultaneously

Slide Transition

Manual Transition

For more control, wrap Switch manually:

Notes

• AnimatedSwitch uses Vue’s <Transition> component
• CSS transition classes follow Vue’s naming convention
• Use mode="out-in" to prevent layout shifts
• See AnimatedSwitch API for details