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.

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