Angular 2/4+ Router animation, wait for previous route animation to complete

Question

I have the following animation configured on 2 of my routes.

trigger('routeAnimation', [
        transition(':enter', [
            style({ opacity: 0 }),
            animate('1s', style({ backgroundColor: 1 }))
        ]),
        transition(':leave', [
            style({ backgroundColor: 1 }),
            animate('1s', style({ backgroundColor: 0 }))
        ]),
    ]),

They work properly. Both get executed when switching from route A to B. However they execute simultaneously. I would like for the TO route to wait for the FROM route's exit animation to finish before coming in.

I want A to completely fade out before B comes in.

Is that possible? Maybe with lifecycle hooks or something?

Answer 1

To wait for the leaving route's animation to finish before the entering route's animation begins:

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 entering route by the duration of the leaving route, leading to a verbose solution)