Angular4 Router Fade Transitions
Tanya Gray
1694

Thanks for posing this Tanya! It was a big help in getting my head wrapped around how to approach router transitions.

The absolute positioning for the transitions caused a few layout issues for me, so I added this to the component to insert a class to set the position back to relative:

@HostBinding( 'class.page-transitioned' ) pageAnimationFinished: boolean = false;
pageTransitioned() {
     this.pageAnimationFinished = true;
}

In the HTML, I added this to the router wrapper to fire that function once the transition was complete:

(@fadeAnimation.done)=”pageTransitioned()”

That let me stack the routes for the transitions, while not causing my footer to overlay the bottom of my content.

Thanks again

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.