CODEWITHSUNDEEP
angularangular2-router3
user3230660
user3230660

Reputation:

How do I implement a fade in/out effect on my page when it loads/unloads?

I think I have the basic animation part hooked up I just need to know what events to handle. Ideally I would like a solution that I could use at the navigation level so I could wrap all my components but a simple example of a page load would suffice and be much appreciated. I found several other questions on SO that are related but they do not appear to answer my specific question or are outdated:

Angular 2 "slide in animation" of a routed component Page transition animations with Angular 2.0 router and component interface promises

Here is what I have thus far:

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()
    {

    }
}

Upvotes: 6

Views: 1848

Answers (1)

Marc P&#233;rez
Marc P&#233;rez

Reputation: 293

Are you sure you don't refer to the answer: https://stackoverflow.com/a/40077108/6678754 with plunker: https://embed.plnkr.co/Vral6cwlaQz27MUQNkVg/ ? That should work for you, check it again.

You have another option though: use the animation in the parent where you import your about component, like so:

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

Upvotes: 1

Related Questions