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;
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.