Angular 2/4 + router animation, wait for the previous route animation to complete
I have the following animation set up on my two routes.
trigger('routeAnimation', [
transition(':enter', [
style({ opacity: 0 }),
animate('1s', style({ backgroundColor: 1 }))
]),
transition(':leave', [
style({ backgroundColor: 1 }),
animate('1s', style({ backgroundColor: 0 }))
]),
]),
They are working correctly. Both are executed when switching from route A to B. However, they are executed at the same time. I would like the TO route to wait for the FROM route exit animation to complete.
I want A to disappear completely before B enters.
Is it possible? Maybe with lifecycle hooks or something?
+3
source to share
1 answer
Waiting for the outgoing route animation to complete before the route animation starts:
const fadeIn = [
query(':leave', style({ opacity:1 })),
query(':enter', style({ opacity:0 })),
query(':leave', animate('200ms', style({ opacity:0 }))),
query(':enter', animate('200ms', style({ opacity:1 })))
]
...
trigger('routerAnimations', [
transition('route1 => route2', fadeIn)
]
The animations will play in sequence.
(Updated after suggesting to delay the incoming route by the length of the outgoing route, leading to a detailed solution)
+2
source to share