角度自定义复杂路由器过渡

Question

当前，我正在尝试实现一些路由转换。为此，我使用的是在单击时显示的组件，调用其相应服务的功能：

routeTransition(destination) {
  if (this.router.url !== destination) {
    this.ls.startLoading(destination)
  }
}

startLoading(destination) {
  if (this.loading.getValue() === 0) {
    this.loading.next(1);
    setTimeout(() => {
      this.router.navigate([destination]);
    }, 750)
  }
}

如您所见，我有点延迟了导航-之所以这样做，是因为我的路线转换是从底部开始逐渐变黑的div-我在覆盖屏幕的时候定时导航以更改路线。然后，在新组件内部，调用服务的stopLoading函数，该函数通过缓和再次隐藏过渡的div。

这是我正在谈论的过渡：

它有效，但是我认为这不是完美的方法，因为当用户向后导航时，它将不起作用。实施这种过渡的正确方法是什么？ 可以使用Angular的浏览器动画吗？

当前，我正在尝试实现一些路由转换。为此，我使用的是在单击时显示的组件，该组件调用其相应服务的功能：routeTransition（destination）{...

Answer 1

使用setTimeout确实是一件坏事，因为这是近似的。Angular可以提供动画，尤其是对于路由器过渡。