具有多个路由器插座的 Angular 7 路由器动画答案

【问题标题】：Angular 7 router animation with multiple router outlets具有多个路由器插座的 Angular 7 路由器动画
【发布时间】：2019-06-28 10:05:26
【问题描述】：

我正在尝试在路由之间添加一个过渡，遵循this article 和几个类似的。

我确实可以让它工作，但我在使用 CSS 绝对位置时遇到问题，这似乎需要：

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

我的应用有多个路由出口：页眉、主目录和页脚。我在应用程序根目录上使用 flexbox 使页眉和页脚粘在顶部和底部。

您可以在此stackblitz 中查看布局和过渡。

问题在于将位置设置为绝对和 100% 会导致内容进入页脚（请参阅“关于”页面）。

没有位置：绝对没有办法进行交叉淡入淡出过渡吗？这似乎假设内容占据了整个页面。如您所见，很多时候还有其他内容，例如页脚或其他静态内容或第二个路由器出口。

我正在寻找的是只影响给定路由器插座中的内容的过渡。

【问题讨论】：

【解决方案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

【讨论】：