具有多个路由器出口的 Angular 7 路由器动画

Question

我正在尝试按照这篇文章和几篇类似的文章在路线之间添加转换。

我确实可以让它工作，但我在使用 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 /样式.css