角度路由器动画未触发

如何解决角度路由器动画未触发

在我的 angular 应用程序中，我希望路由转换是动画的：离开的组件应该淡出，然后进入的组件应该淡入。我想说的基本内容:)

所以我创建了 this stackblitz（其中的一些代码是从别处复制的），但我的主要资源是 Angular Route transition animations

但是，正如您所看到的，由于某种原因，动画没有做任何事情。

这是我的动画代码

export const routerTransition = trigger("routeAnimations",[
  transition("* => *",[
    query(":enter,:leave",style({ position: "fixed",width: "100%" })),query(":enter",style({ transform: "translateX(100%)" })),sequence([
      query(":leave",animateChild()),query(":leave",[
        style({ opacity: 1 }),animate(
          "1000ms cubic-bezier(.75,-0.48,.26,1.52)",style({ opacity: 0 })
        )
      ]),[
        style({ transform: "translateX(0)",opacity: 0 }),style({ opacity: 1 })
        )
      ]),animateChild())
    ])
  ])
]);

另外，这里是 app.component 中的 HTML，因为那是我将动画与路由器连接的地方

<main [@routeAnimations]="prepareRoute(outlet)">
    <router-outlet #outlet="outlet"></router-outlet>
</main>

prepareRoute 看起来像：

prepareRoute(outlet: RouterOutlet) {
   return (
     outlet && outlet.activatedRouteData && outlet.activatedRouteData.animation
   );

}

一切都根据文档，所以我对动画有点迷茫，所以任何帮助将不胜感激！

解决方法

您的示例中有两个问题

1. 您的 BrowserAnimationsModule 中缺少 AppModule。考虑将其添加到 imports 包中的 "@angular/platform-browser/animations" 部分
2. 如果您检查 prepareRoute 函数，您可以看到它利用了激活路线数据中的 animation 属性。在您参考的文档中也是如此。但是，您的路线数据丢失。考虑至少添加

   {
      path: "foo",component: FooComponent,data: { animation: true }
   }
   

   到 foo 路径，您的动画就会开始工作。

您可以在此处找到 fixed example，但我建议您更准确地查看文档，因为您可以定义目前不使用的动画名称。