Angular router animation not triggering

Question

In my angular app I would like the router transitions be animated: the leaving component should fade-out and after that, the entering component should fade in. Basic stuff I would say :)

So I created this stackblitz (some of the code in there was copied from elsewhere), but my main resource was the Angular Route transition animations

But, as you can see, for some reason the animations doesn't do anything.

Here is my animation code

export const routerTransition = trigger("routeAnimations", [
  transition("* => *", [
    query(":enter, :leave", style({ position: "fixed", width: "100%" })),
    query(":enter", style({ transform: "translateX(100%)" })),
    sequence([
      query(":leave", animateChild()),
      query(":leave", [
        style({ opacity: 1 }),
        animate(
          "1000ms cubic-bezier(.75,-0.48,.26,1.52)",
          style({ opacity: 0 })
        )
      ]),
      query(":enter", [
        style({ transform: "translateX(0)", opacity: 0 }),
        animate(
          "1000ms cubic-bezier(.75,-0.48,.26,1.52)",
          style({ opacity: 1 })
        )
      ]),
      query(":enter", animateChild())
    ])
  ])
]);

Also, here is the HTML from app.component, because thats the place where I connect the animation with the router

<main [@routeAnimations]="prepareRoute(outlet)">
    <router-outlet #outlet="outlet"></router-outlet>
</main>

And the prepareRoute looks like:

prepareRoute(outlet: RouterOutlet) {
   return (
     outlet && outlet.activatedRouteData && outlet.activatedRouteData.animation
   );

}

All according to the docs, so I'm a bit lost here with the animations so any help would be appreciated!

score 1 · Accepted Answer · answered Feb 13 '21 at 23:00

1

You have two issues in your example

You're missing BrowserAnimationsModule in your AppModule. Consider adding it into imports section from "@angular/platform-browser/animations" package
If you check your prepareRoute function, you can see that it utilizes the animation property from the activated route data. The same is in the docs that you refer to. However, your route data is missing. Consider adding at least
```
{
   path: "foo",
   component: FooComponent,
   data: { animation: true }
}
```
to the foo path, and your animations start working.

Here you can find a fixed example however I'd advise you to check the docs more precisely because you can define animation names that you do not use for now.

answered Feb 13 '21 at 23:00

Sergey Mell

7,780
1
26
50

@Jeanluca Scaljeri, let me know if my answer helps or you need some additional information – Sergey Mell Feb 14 '21 at 00:25
Thanks a lot. I tried to fix in in my App but still it didn't work. But eventually I noticed that [HotToastModule](https://github.com/ngneat/hot-toast) module breaks animation for some reason ([stackblitz](https://stackblitz.com/edit/angular-ivy-w7npqk?file=src%2Fapp%2Fapp.module.ts)) I'm going to file an issue for that library! – Jeanluca Scaljeri Feb 14 '21 at 08:09

Angular router animation not triggering

1 Answers1