Angular 7 router animation with multiple router outlets

Question

I am trying to add a transition between routes, following this article and several like it.

I can indeed get it to work, but I am having issues using the CSS position-absolute this seems to require:

router-outlet ~ * {
 position: absolute;
 width: 100%;
 height: 100%;
}

My app has multiple route outlets: a header, a main, and a footer. I am using flexbox on the app root to make the header and footer stick to the top and bottom.

You can see the layout and transition working in this stackblitz.

The issue is that setting the position to absolute and 100% causes the content to run into the footer (see the "about" page).

Is there no way to do a cross-fade transition without position: absolute? This seems to assume the content takes up the whole page. As you can see, many times there's other content like a footer or some other static content or second router outlet.

What I'm looking for is a transition to affect only what's in the given router outlet.

Sheldonshelduck

Answer 1

Give display: block a try:

main router-outlet.maincontent ~ * {
  display: block;  
  width: 100%;
  height: 100%;
}

I'm trying to find a drawback to using it (or not using position: absolute), but things look to be working like you'd expect --> https://stackblitz.com/edit/crossfade-test-eepena?file=src/styles.css

Idea from Angular 4 animation for fade in and out a view

Synopsis

That does work great in this case, I'll try it in my (more complex) app. The issue I see with a quick test is that the "outgoing" route briefly displays below the incoming content, then vanishes. – Sheldonshelduck

@Steve, could you fix the problem? – Derzon

I had the same situation. Fixed the duplicate content during the animation by removing the 'leave' transition entirely. Didn't really seem to do anything anyway. – Morehouse