How to integrate the fadeIn fadeOut effect on the Angular routes

Question

In my Angular application I have implemented the functionality for the animation of the routes following the instructions at the following link: Route transition animations.

I would like to replace the slideIn animation defined in the "route-transition-animations.ts" file with an effect identical to the one inserted by navigating through the pages of the Angular site (fadeIn-fadeOut effect).

I have tried:

export const fadeAnimation =
trigger('routeAnimations', [
    transition('* => *', [
        query(':enter', [
                style({ opacity: 0 })
            ], { optional: true }
        ),
        group([
            query(':leave', [
                    animate(300, style({ opacity: 0 }))
                ],
                { optional: true }
            ),
            query(':enter', [
                    style({ opacity: 0 }),
                    animate(300, style({ opacity: 1 }))
                ],
                { optional: true }
            )
        ])
    ])
]);

With the following CSS:

ng-deep:: router-outlet~* {
    position: absolute;
    width: 100%;
    height: 100%;
}

Can anyone help me define the animation style?

Thanks.