Анимация перехода Angular 6 Router не работает (панель навигации)

Question

Я пытаюсь реализовать переход Fade в моей розетке роутера - всякий раз, когда вы переходите на страницу, вы получаете fadein / out.

Однако, кажется, что это просто не работает, розетка маршрутизатора находится восновная область панели навигации: Stackblitz моего приложения

См. "fadeIn.ts" для анимации. Смотрите "app.nav-component" html / ts и модуль приложения для реализации

Я ожидаю, что при нажатии на ссылку в навигации сработает анимация перехода.

Answer 1

Я немного изменил ваши fadeIn.ts.

import {
    trigger,
    animate,
    transition,
    style,
    query, group
  } from '@angular/animations';

  export const fadeAnimation = trigger('fadeAnimation', [
    transition('* <=> *', [

        /* order */

        /* 1 */ query(':enter, :leave', style({ position: 'fixed', width: '100%' })

          , { optional: true }),


        /* 2 */ group([  // block executes in parallel

          query(':enter', [

            style({ transform: 'translateX(100%)' }),

            animate('0.3s ease-in-out', style({ transform: 'translateX(0%)' }))

          ], { optional: true }),

          query(':leave', [

           style({ transform: 'translateX(0%)' }),

            animate('0.3s ease-in-out', style({ transform: 'translateX(-100%)' }
          ))], { optional: true }),         

        ])

      ])
  ]);

WORKING DEMO