角7路由器动画与多个路由器网点

Question

我想添加路由之间的转换，以下this article和几个喜欢它。

我的确可以得到它的工作，但我使用CSS位置绝对这似乎需要有问题：

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

我的应用程序有多个路由网点：一个头，一个主要和页脚。我使用的应用程序根Flexbox，就使页眉和页脚粘在顶部和底部。

你可以看到布局和转型这个stackblitz工作。

问题是，设置的位置绝对和100％时，会碰到页脚的内容（请参见“关于”页面）。

有没有办法做到没有位置交叉淡入淡出过渡：绝对？这似乎假设内容占据了整个页面。正如你所看到的，很多时候有没有像一个页脚或一些其它静态内容或第二路由器出口等内容。

我正在寻找的是只影响什么在给定的路由器出口的转变。

Answer 1

给display: block一试：

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

我试图找到一个缺点使用它（或不使用position: absolute），但事情看起来是工作就像你所期望的 - > https://stackblitz.com/edit/crossfade-test-eepena?file=src/styles.css