Angular 7 Page Animation Cause Page Reload

I'm trying to add page animation using Angular Animation (Angular 7). It worked on some pages, but some others will be auto reloaded every time the animation is triggered.

For example, I'm navigating from /data/test-data to /data/execute-model, "execute-model" will be loaded first, and ngOnInit is triggered, but the url changes to "/data/execute-model?" and the page refreshes. I don't know where the "?" comes from. Once I took out the animation, the navigation works without page reload.

For the pages that works, they have the exact same configuration. I'm not sure where the problem is.

BTW, this only happens if I navigate with a button, which (click) triggers this.router.navigate(['/data/execute-model']); If I type in the url, the animation works and no reload. But this is not what I want.

Thank you so much for your help!

this is the html:

div class="content-area" [@routeAnimations]="prepareRoute(outlet)">
  <router-outlet #outlet="outlet"></router-outlet>
</div>

this is the component ts: it returns the stateChangeExpr as string for the animation trigger

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

this is the animation.ts:

export const slideInAnimation = trigger('routeAnimations', [
  transition(
    '*<=>*',
    [
      style({ position: 'relative' }),
      query(':enter, :leave', [
        style({
          position: 'inherit',
          width: '100%'
        })
      ]),
      query(':enter', [style({ right: '-100%' })]),
      query(':leave', animateChild(), { optional: true }),
      group([
        query(':leave', [animate('350ms ease-out', style({ right: '100%' }))], { optional: true }),
        query(':enter', [animate('350ms ease-out', style({ right: '0%' }))])
      ]),
      query(':enter', animateChild())
    ]
  )
]);