Route Animations
Learn how to define animation sequences to create route transitions as the user navigates from one route to another.
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-outlet
is a directive that tells Angular’s router ...