angular - Angular routing animation: Plays once on refresh

Question

I'm trying to adding a sliding transitions between different pages via a button click but the animation will only play when i either refresh the page or type the address in the url.

BrowserAnimationModules is imported and tried putting the router outlet tag outside of the app-main-nav still creates the same problem.

animations.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>

The routes should play a sliding animation when a button is pressed. The animation only plays when the page is refreshed

标签： angular

Answer 1

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