Question

我想实现路线转换动画，但是我的路线位于子文件夹结构中。对于每个页面，每个页面过渡都应该有淡入淡出的动画：

animations: [
 trigger("pageAnimation", [
  transition(":enter", [
    style({
      opacity: 0,
    }),
    animate(
      "0.2s ease-in",
      style({
        opacity: 1,
      }),
    ),
  ]),
]),
],

home-routing.module.ts

const routes: Routes = [
  { path: "*", redirectTo: "device-type" },
  { path: "", redirectTo: "device-type", pathMatch: "full" },
  { path: "device-type", component: DevicetypeComponent },
  { path: "device-brand", component: DevicebrandComponent },
  { path: "device-model", component: DevicemodelComponent }
];

但是，我的路由器出口在应用程序组件（父组件）中

app.component.html

<div class="container-fluid">
  <router-outlet></router-outlet>
</div>

我尝试了以下示例，但动画未激活。

https://stackblitz.com/edit/angular-7-improved-router-transition-animation?file=src%2Fapp%2Fcommon%2Fanimations.ts

我发现的唯一可行的解决方法是在每个单个组件上添加动画，但是这违背了路径转换动画的目的。

如果路由器出口和页面路由位于不同的模块上，是否有人知道如何添加路由器转换动画？（在我的情况下，路由在本地路由模块中，而路由器出口在我的应用程序组件中）

感谢您的帮助！

更新：

好的，我找到了问题https://stackblitz.com/edit/angular-lazyloading-animation?file=src%2Fapp%2Fapp.component.html

的解决方案

Angular 8：路线过渡动画

0 个答案: