Анимация углового маршрута, воспроизводимая после завершения первого

#angular

Вопрос:

Я использую анимацию маршрута в своем приложении, также у меня есть другая анимация списка, но проблема в том, что при воспроизведении анимации маршрутизатора маршрут, который должен быть показан, появляется непосредственно перед текущим маршрутом :включается анимация «оставить». У кого-нибудь есть какие-нибудь идеи, как это исправить? Я попытался добавить задержку в :введите анимацию, но это не имеет никакого эффекта, так как снова страница маршрута :вводится после задержек, а анимация :оставить воспроизводится после этого. Вот мой спусковой крючок:

 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 }),
]),
])