Angular 路由动画 : Plays once on refresh

Question

我正在尝试通过单击按钮在不同页面之间添加滑动过渡，但动画只会在我刷新页面或在 url 中输入地址时播放。

BrowserAnimationModules 被导入并尝试将路由器导出标签放在 app-main-nav 之外仍然会产生同样的问题。

动画.ts

export const slider =
  trigger('routeAnimations', [
  transition('* => isLeft', slideTo('left') ),
  transition('* => isRight', slideTo('right') ),
  transition('isRight => *', slideTo('left') ),
  transition('isLeft => *', slideTo('right') )
]);

function slideTo(direction) {
  const optional = { optional: true };
  return [
    query(':enter, :leave', [
      style({
        position: 'absolute',
        top: 0,
        [direction]: 0,
        width: '100%'
      })
    ], optional),
    query(':enter', [
      style({ [direction]: '-100%'})
    ]),
    group([
      query(':leave', [
        animate('800ms ease', style({ [direction]: '100%'}))
      ], optional),
      query(':enter', [
        animate('800ms ease', style({ [direction]: '0%'}))
      ])
    ]),

    // query(':leave', animateChild()),
    // query(':enter', animateChild()),
  ];
}

app.component.ts

prepareRoute(outlet: RouterOutlet) {
  return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
}

app.component.html

<app-main-nav>
  <div [@routeAnimations]="prepareRoute(outlet)" style="position: relative;">
    <router-outlet #outlet="outlet"></router-outlet>
  </div>    
</app-main-nav>

按下按钮时，路线应播放滑动动画。动画仅在页面刷新时播放

Answer 1

就我而言，错误是我将导航返回按钮放在表单上。因此，当我想返回时，它正在触发表单并重新加载页面。