Html 角度自定义复杂路由器转换

目前我正在尝试实现一些路由转换。为此，我使用了一个组件，该组件在单击调用其各自服务的功能时显示：

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的浏览器动画是否可以做到这一点？

使用

设置超时确实是一件坏事，因为这是近似值。

Angular可以提供动画，尤其是路由器过渡

您可以向路由器出口添加指令，以在页面更改时触发角度动画

例如，在app.component.html上：



app.component.ts

public prepareRoute（routerOutlet:routerOutlet）：字符串{
返回routerOutlet&&routerOutlet.activatedRouteData&&routerOutlet.activatedRouteData['animation']；
}

在本例中，
prepareRoute
将通过使用属性
animation


这样，它只允许在特定页面上有动画

您还必须在组件内部注册动画

@组件({
动画：[
网页动画
],

然后定义管线之间的动画类型

export const PAGES\u ANIMATION=trigger（'routeAnimations'[
过渡（`home=>register`，幻灯片\u RIGHT\u动画），
过渡（`register=>home`，幻灯片\u左\u动画），

最后，创建一个角度动画

导出常量幻灯片\u右\u动画=[
风格({
位置：'相对'
}),
查询（'：输入，：离开'[
风格({
高度：“100vh”，
左:0,，
溢出：“隐藏”，
位置：'绝对'，
排名：0，
宽度：“100%”
})
]),
查询（“：输入”[
风格({
变换：“translateX（100%）”
})
]),
查询（':leave'，animateChild（）），
团体([
查询（':leave'[
设置动画（“400ms放松”，样式({
转换：“translateX（-100%）”
}))
]),
查询（“：输入”[
设置动画（“400ms放松”，样式({
转换：“translateX（0%）”
}))
])
]),
查询（':enter'，animateChild（））
];

如果这是您的正确答案，但您做不到，请向我寻求帮助。

你也可以通过阅读来理解这些概念，并看到一个真实世界的例子。
我不会使用路由器进行UI计时。我会将你的“动画”全部封装在一个组件中，并使用scss
@keyframes
功能对其进行动画制作。延迟任何路由都不会提供最佳的用户体验（IMO）@mwilson但是在过渡div覆盖屏幕之前路线不会改变吗？是的，我说的是将动画移动到目标组件。但是，我想我现在明白了。他们都有离开/进入动画，对吗？意思是你的“离开动画”是黑色幻灯片向上和“进入动画”作为红色背景，谢谢你，我以前使用过这个，但是我从来没能想出我在我的问题中描述的一个过渡——就像上面的GIF，过渡到黑色，然后改变路线，从黑色过渡到新的路线，另外中间是一个文本动画，需要等待。使用您描述的方法实现这一点？使用此功能可以做到：当前页面=>animation=>new page。要实现平滑的黑盒fadeInUp动画似乎是非常可能的，因为它只是纯css的东西，而不是硬的东西。现在，对于之后弹出的文本，它也是可能的，因为您可以在孩子身上应用不同的动画。但是我认为此文本必须位于CSS
content
属性中，因为您无法更改HTML。因此这并不容易，但至少值得尝试。还有另一种方法可以做到这一点（通过访问HTML简化转换）通过使用专用于此动画的中间件页面。然后，您的进程将是当前页面=>动画=>中间件页面=>动画？=>新页面。在这种情况下，您应该使用中间件页面内的路由器DI导航到新页面。新页面url应设置在此页面的查询参数内或专用服务内ice。您还应该在路由器上使用
skipLocationChange
属性，以避免污染导航历史记录。使用中间件页面，我确信我可以想出与gif相同的行为。不过，在我看来，仅为其创建页面似乎有点“没有角度”也许它不会有任何缺点，但我不能确定。因此，我再次建议您努力尝试第一种解决方案，但尽早只关注黑盒动画，并将文本动画保留到最后。好的，感谢您的努力-我将尝试实现第一种方法，但可能会返回给您；）-但是，基本路线动画是否可以基本上不显示路线显示一些文本，对其进行动画处理，然后转换新路线？