Angular 路由器动画未触发

Question

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

所以我创建了this stackblitz (some of the code in there was copied from elsewhere), but my main resource was the 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

你的例子有两个问题

您的 AppModule 中缺少 BrowserAnimationsModule。考虑将其添加到 "@angular/platform-browser/animations" 包

imports

如果你检查你的 prepareRoute 功能，你可以看到它利用了激活的路线数据中的 animation 属性。您引用的文档中也是如此。但是，您的路线数据丢失了。考虑至少添加
```
{
   path: "foo",
   component: FooComponent,
   data: { animation: true }
}
```
到 foo 路径，你的动画开始工作。

在这里您可以找到 fixed example 但是我建议您更准确地查看文档，因为您可以定义暂时不使用的动画名称。

Angular 路由器动画未触发

Angular router animation not triggering

angular

typescript

angular-routing

angular-animations