Question

在我的 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 })
        )
      ]),
      query(":enter", [
        style({ transform: "translateX(0)", opacity: 0 }),
        animate(
          "1000ms cubic-bezier(.75,-0.48,.26,1.52)",
          style({ opacity: 1 })
        )
      ]),
      query(":enter", 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
   );

}

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

Answer 1

您的示例中有两个问题

您的 BrowserAnimationsModule 中缺少 AppModule。考虑将其添加到 imports 包中的 "@angular/platform-browser/animations" 部分
如果您检查 prepareRoute 函数，您可以看到它利用了激活路线数据中的 animation 属性。在您参考的文档中也是如此。但是，您的路线数据丢失。考虑至少添加
```
{
   path: "foo",
   component: FooComponent,
   data: { animation: true }
}
```
到 foo 路径，您的动画就会开始工作。

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

角度路由器动画未触发

1 个答案: