Router Animations seem to be activating triggers for other angular animations inside the components

[arctic musk]

Hi!

I'm currently building an app that needs to have animations when transitioning from one page to another so I implemented router animations where one page fades out and scales down and the new one scales in and fades in as well.

Everything seemed to be working fine until I noticed that most of the remaining angular animations that I have inside the pages seem to be triggered on the route transition even though I don't manually trigger any of them.

For example, I have a timer with a tooltip that should be shown on specific ocasions. That tooltip has a "fadeIn" animation that is being triggered on the router transition even though its flag value is never changed...

Is anyone able to help me here?

Thanks in advance!

PS: min repro -> https://stackblitz.com/edit/stackblitz-starters-uaq819

Tooltip animation

Router animation

[remote raft]

I think very few people use animations here. But if you want to maximize the chance of getting help, read #how-to-get-help , and post a complete minimal reproduction as a stackblitz.

[arctic musk]

@remote raft I added the minimal reproduction on stackblitz to the description of the error I'm facing. Here it is -> https://stackblitz.com/edit/stackblitz-starters-uaq819

if you go to the "second page" then "back" the tooltip is toggling on its own when it shouldn't....

[arctic musk]

question, are you looking into it or should I ask someone else? 😁

[remote raft]

By posting here, you asked everybody. But as I said earlier, I don't think there are many people using Angular animations here. I'm not looking into it.

[arctic musk]

thanks for you reply

[icy snow]

Add the following in your tooltip.component.css

:host {
  opacity: 0;
}
``` As you transition from the component with the tooltip to another route, it gets destroyed (add an ngOnDestroy with a console.log and you'll see it's immediately called when you navigate away) while the route transition animation is still running. Meaning that during the time the route transition takes, the animation logic for the tooltip is no longer available and the tooltip shows as it's part of the page (and fades out as part of the route transition animation).

I would also consider using just css animations for these kind of things. The angular animations are nice for route transitions which you can not capture with css, but pure css is better for all in page animations

[keen herald]

angular animations are nice for route transitions
You're so funny

[icy snow]

Thank you, I'm here all week 😛

[arctic musk]

Thank you! It's working fine now! So you think I should prioritize CSS animations toggled with NgClasses instead of Angular Animations?

[icy snow]

Yeah, I would focus on pure css animations for these things.

[arctic musk]

I'm facing the same issue with another component (a progress bar) where I pass the percentage as a variable to the angular animation

state('grow', style({
        width: 'max(20%, {{currentWidth}}%)'
      }), { params: {currentWidth: '20' }} ),

when going back to the previous page, it resets the width to 0%.

In here you also think I should be doing that with css animation right? I'm just not sure on how to set programmatically the width I want the progress bar to animate to...

this is how I'm passing the width to the animation

[icy snow]

So, it should keep the value when navigating away? In that case you would need to store the value in a service that is providedIn root (e.g. single instance available during the lifetime of the application). With regards to how you can get a value showing in a progress, this is a very basic example: https://stackblitz.com/edit/stackblitz-starters-kzrbqe?file=src%2Fprogress.component.ts

[arctic musk]

Thanks for all the help!!