How can I implement the fade in / out effect on my page when loading / unloading?

Question

I think I have the main part of the animation. I just need to know which events to handle. Ideally, I would like to get a solution that I could use at the navigation level so that I can wrap all my components, but a simple page loading example would be sufficient and would be greatly appreciated. I found several other questions about SO that are related, but they don't seem to answer my specific question or are deprecated:

Angular 2 "slide in animation" of the routed component of Animation on transition of the page with Angular 2.0 router and the interface of components promises

Here is what I still have:

html file

<article @heroState="componentState">
           <p>article element should fade in/out</p>
</article>

component

@Component({
    selector: 'blog-about',
    templateUrl: './app/about/about.html',
    animations: [
        trigger('heroState', [
            state('active', style({
                backgroundColor: 'blue',
                transform: 'scale(1)'
            })),
            state('inactive', style({
                backgroundColor: 'green',
                transform: 'scale(1.1)'
            })),
            transition('active => inactive', animate('1000ms ease-in')),
            transition('inactive => active', animate('1000ms ease-out'))
        ])
    ]
})
export class About implements OnInit, OnDestroy {
    public componentState: string;
    public Title: string

    constructor() {
        this.Title = "this is about";
    }

    ngOnInit()
    {
        this.componentState = 'inactive';
    }

    ngOnDestroy()
    {

    }
}

Answer 1

, : fooobar.com/questions/211620/... plunker: https://embed.plnkr.co/Vral6cwlaQz27MUQNkVg/? , .

: , , :

<blog-about [@heroState]="activeRouteVar"></blog-about>