I am trying to implement Fade transition on my router outlet - whenever you move to a page you get fadein/out.
However it just doesn't seem to work at all, the router outlet is in the main area of the navigation bar: Stackblitz of my app
See "fadeIn.ts" for the animation See "app.nav-component" html/ts and app module for implementation
I would expect when clicking a link in the navigation the animation of transition would trigger.
I modified your fadeIn.ts a bit.
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 }),
])
])
]);