Angular Router Animations, показывающие неожиданное поведение

Question

Я анимирую свою веб-страницу, используя Angular Router Animations. Я хочу, чтобы старая страница исчезала, а новая страница скользила одновременно, когда я перемещался sh. Код, приведенный в Angular руководствах по документации, не работает для меня (я не знаю причину), поэтому я попробовал собственную реализацию. Это моя app.component.html

<main [@routeAnimations]="prepareRoute(outlet)">
    <router-outlet #outlet="outlet"></router-outlet>
</main>

Это моя prepareRoute функция в app.component.ts

prepareRoute(outlet: RouterOutlet){
    console.log(outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation']);
    return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
 }

Это в моей app-routing,module.ts

const routes: Routes = [
{path:'',component:BasicComponent,data:{animation:'basicPage'}},
{path:'rules',component:RulesComponent,data:{animation:'rulesPage'}},
{path:'rules/:id',component:RulesComponent,data:{animation:'rulesIdPage'}}
];

И это есть в моем app-animations.ts файле

export const fader=(

    trigger('routeAnimations',[
        // transition('basicPage=>rulesIdPage',[query(':leave',animate('10s',style({opacity:'0'})))]), 


        transition('basicPage=>rulesPage,basicPage=>rulesIdPage',[style({transform:'translateX(500px)',opacity:'0'}),animate('10s ease')]),     //works!!

        transition('rulesPage=>basicPage,rulesIdPage=>basicPage',[
            style({transform:'translateX(-500px)',opacity:'0'}),
            animate('10s  ease-out')
    ])

    ])
)

Теперь моя интерпретация прокомментированной строки говорит, что старое представление (basicsPage) должно исчезнуть до opacity:0, и одновременно rulesIdPage должно скользить по. Но в действительности, когда я раскомментирую вышеприведенную строку, basicsPage ждет 10s, но ничего не происходит, а затем неожиданно появляется rulesIdPage.

Теперь, когда я комментирую строку (показано уже прокомментировано в приведенном фрагменте), анимация работает так, как ожидалось. Когда я перемещаюсь от basicsPage до rulesIdPage, последний скользит по первому.

Но в чем проблема в закомментированной строке?

PS. Я много раз читал документацию angular, но в ней приведены очень ограниченные примеры использования query, и я не могу понять это. Кроме того, учебники по анимации angular на YouTube не относятся к моему запросу. Большинство из них просто показывают реализацию примера в документации, которая в моем случае бесполезна.

Также есть связанный вопрос, но он не имеет отношения к моей проблеме и не имеет никакого ответа Angular анимация маршрута, не анимируйте старый маршрут .