I'm trying to implement a slide-in/slide-out animation when the route changes. I've created a minimal reproduction of my setup here:
https://stackblitz.com/edit/angular-ueeuyd
I have a 3-level hierarchy of routes: Cuisines -> Dishes -> Recipe
Each route has a module associated with it, which is lazy loaded using the loadChildren property in its parent route. The animations are set up to use the depth property that is included in the route data.
The issue is the following:
Whenever I move from a parent route to a child route, the animations of the parent route are also played. 
Has anyone experienced this before? Any thoughts on how I can fix this?
