Angular route animation playing after the first one is finished

Solution for Angular route animation playing after the first one is finished
is Given Below:

I am using route animations in my app, also I have another list animation, but the problem is that when the router animation plays the route that has to be shown appears just before the current rout :leave animation kicks in. Has someone got any ideas how to fix that? I tried adding delay to :enter animation but this has no effect as again the route page :enters after the delays and the :leave animation plays after that. Here is my trigger:

trigger('routeAnimations', [
transition('* <=> *', [
query(':enter', [
  style({
    position: 'absolute',
    left: 0,
    width: '100%',
    opacity: 0
  }),
], { optional: true }),
query(':leave', [
  style({
    position: 'absolute',
    left: 0,
    width: '100%',
  }),
], { optional: true }),
// Animate the new page in
query(':enter', [
  animate('0.4s ease-out', style({ opacity: 1 })),
], { optional: true }),
query(':leave', [
  animate('0.2s ease-in', style({ opacity: 0 })),
], { optional: true }),
]),
])