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