Question

这是我的路线：

const routes: Routes = [
  { path: "", redirectTo: "home", pathMatch: "full" },
  { path: "home", component: HomeComponent, },
  { path: "profile", component: ProfileComponent, canActivate: [AuthGuard], children: [
    {path: '', redirectTo: 'transactions', pathMatch: "full"},
    {path: "transactions", component: TransactionsComponent},
    {path: "auction-history", component: AuctionHistoryComponent}
  ] },
];

我在app.component中有一个路由器动画，用于在home和profile之间导航。在profile.component内部，我有一个路由器动画，用于在transactions和auction-history之间导航。这些工作正常。

在transactions组件中，我正在使用以下有问题的动画：

export const smoothHeightAnimation = trigger('grow', [
  transition('* <=> *', [style({ height: '{{startHeight}}px' }), animate('.5s ease')], {
    params: { startHeight: 0 }
  })
]);

动画会触发，但最终会以错误的状态结束（高度太小，某些内容溢出了）。从home-> transactions和auction-history-> transactions导航时都会发生这种情况。

通过Google，我认为这段代码可能会有所帮助：

query('@grow', [
    animateChild()
  ], {optional: true})

确实如此，但只有一部分。如果仅将其添加到app.component的路由器动画中，则smoothHeight在从home-> transactions导航时有效。如果仅将其添加到profile.component的路由器动画中，则smoothHeight在从auction-history-> transactions导航时有效。

但是，如果我同时向animateChild()和app.component的路由器动画中添加profile.component，则仅在从auction-history-> transactions导航时才起作用。

我希望清楚问题所在。有谁知道这里出了什么问题以及如何解决？

与父级动画同时执行时，子级动画有时会失败

0 个答案: