Angular4 Router Fade Transitions
Tanya Gray
5926

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