CODEWITHSUNDEEP
angulartypescriptanimationangular7
siqi ren
siqi ren

Reputation: 31

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())
    ]
  )
]);

Upvotes: 3

Views: 980

Answers (2)

Luis Reinoso
Luis Reinoso

Reputation: 758

Another way to fix this is changing type attribute of the button.

<button type="button"></button>

Issue related on angular https://github.com/angular/angular/issues/27056

Upvotes: 2

doutor
doutor

Reputation: 66

I was having the exact same problem, and after some tries, found a workaround. Looks like HTML Button tag is the trouble on there. Changing my <button> to <a> and adapting the styles, it worked for me. I dont know what causes this, if this is an Angular bug or something else. Hope this answer helps someone!

Upvotes: 0

Related Questions