Angular4 Router Fade Transitions
Tanya Gray

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( '' ) 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:


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

Thanks again