Angular4 | Routetransitions - FadeIn / FadeOut

Question

I'm trying to do a fade-in / fade-out on every route transition in Angular 4.0.1. I've seen countless 'slide-in/slide-out' tutorials, but those haven't worked for me.

This is my app.component

Component:

@Component({
    selector: 'app',
    templateUrl: 'app.component.html',
    animations: [trigger('RouterAnimation', [
        state('void', style({opacity:0}) ),
        state('*', style({opacity:1}) ),
        transition(':enter', [
            style({opacity: 0}),
            animate(2000, style({opacity: 1})),
        ]),
        transition(':leave', [
            style({opacity: 1}),
            animate(1000, style({opacity: 0})),
        ])
    ])],
    host: {'[@RouterAnimation]': 'true'}
})

HTML :

<notification></notification>
<div class="page-wrapper">
    <login-register></login-register>

    <app-header></app-header>

    <sub-header></sub-header>

    <router-outlet></router-outlet>
    <router-outlet name="popup"></router-outlet>

    <app-footer></app-footer>
</div>

The code above does not work, should the @RouterAnimation be variable and change on component load?

All the routing in the app is handled by a custom routing service (a wrapper of Router), I could send a broadcast to the app.component every time a url change happens, with a delayed routing (time of the :leave transition)?

Can i specify where i want to use the animation in my app-routing.module?

Does anyone know how this should work ? Or have a working example in angular 4.0.1 with complex routes (children and not using routerlink)

score 1 · Answer 1 · answered Apr 19 '17 at 10:46

Solved this by using a broadcast to change the routeAnimation trigger.

It still feels a bit hackish, and I think there is a better way. If anyone has a better idea, please let me know!

trigger:

trigger('RouterAnimation', [
    state('void', style({opacity: 0})),
    state('*', style({opacity: 1})),
    transition('empty -> animate', [
        animate(500, style({opacity: 1})),
    ]),
    transition(':enter', [
        animate(500, style({opacity: 1})),
    ]),
    transition('animate -> empty', [
        animate(500, style({opacity: 0})),
    ]),
    transition(':leave', [
        animate(500, style({opacity: 0})),
    ])
]

app.component.html:

<div style="opacity: 0" [@RouterAnimation]="animate" (@RouterAnimation.done)="animationDone($event)">
    <div class="page-wrapper">
        <login-register></login-register>

        <app-header></app-header>

        <sub-header></sub-header>

        <router-outlet></router-outlet>
        <router-outlet name="popup"></router-outlet>

        <app-footer></app-footer>
    </div>
</div>

app.component.ts:

    this.broadcastService.on('animateStart').subscribe(() => {
        this.animate = "empty";
    });
    this.broadcastService.on('animateStop').subscribe(() => {
        this.animate = "animate";
    });

router.service.ts

this.broadcastService.broadcast('animateStart');
    setTimeout(() => {
        this.broadcastService.broadcast('animateStop');
        this.router.navigate(this.currentUrl);
    }, 500)

Still only works when using the custom router service, routerLink= ... does not work.

Angular4 | Routetransitions - FadeIn / FadeOut

1 Answers1