Route Animations
Explore how to create route animations in Angular that smoothly transition between views using states, triggers, and fade effects. Learn to animate router-outlet wrapped divs, implement a prepareRoute function, and manage fade in and fade out effects to improve navigation visual flow in your Angular apps.
We'll cover the following...
Route animations refer to the animations that are applied to view transitions during a route change. Route animations are done by defining a nested animation sequence in the top-level component that hosts the view and the components that host the embedded views.
Route animations can also be applied to nested router-outlets in your application—the animation trigger just needs to be applied to the div elements that wrap the router-outlet.
How it works
The router-outlet (top-level or nested) isn’t directly animated using Angular animations. The router-outlet is wrapped inside a div, which then gets animated.
Note: The
router-outletis a directive that tells Angular’s router ...