5

我正在尝试添加路线之间的过渡，遵循这篇文章和一些类似的文章。

我确实可以让它工作，但我在使用 CSS position-absolute 时遇到了问题，这似乎需要：

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

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

您可以在这个stackblitz中看到布局和过渡。

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

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

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

4

1 回答 1

2

试一试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

来自 Angular 4 动画的想法，用于淡入和淡出视图

于 2019-02-04T18:14:33.337 回答