Example to use this within router-outlet ?

[Romain-P]

Everything in the title, is this possible to use these animations for page transitions?
I tried it following the tutorial https://angular.io/guide/route-animations
It doesn't work

[Lerke]

I am also wondering this. I'm trying to get route animations to work, but have had no success.

[filipows]

Hi Guys,

This library doesn't provide routing animations as such. For some simpler use cases, you could potentially get away with OnEnter animations. Here's the example in StackBlitz

In the example, animations are imported and embedded in routed components or as the route 4 wrapped in the animated component.

This solution isn't perfect though. I think we can implement it better. What kind of animations / use cases were you looking for?

[Lerke]

@filipows Thank you for your quick response and work-around, including demonstrations. To give some insight in my use case: for an application I'm developing, I want to both have standardized transitions between pages (for me, a simple fade-in/out is perfect), and have optional 'initial'/'finalizing' animations occur on a page whenever I navigate to/from it (in my case: moving several elements up/down, depending on whether we're entering or exiting).

My 'idea' (I am very new to animations in Angular, so I'm kind of stumbling about), was to use router-outlet animations between pages to handle page transitions (opacity), and then animate component-specific transitions directly in the component. My plan was to use angular-animations its fadeInOnEnter and fadeOutOnLeave to animate the router-outlet. This way, I would not be required to implement the same exit/enter transition on every page, which could lead to design inconsistensies down the road.

In the end, I ended up with something very similar to your suggestion in StackBlitz, as I wound up having quite a bit of trouble playing both the router-outlet transition and the exiting component its 'inner' transitions at the same time, without one interfering (read: resetting) the other.

What kind of animations / use cases were you looking for

Speaking personally, I would have expected that animations such as FadeIn/Out, and SlideIn/Out 'should' work with router-outlet. As we're working with two components to animate (the leaving one, and the entering one), it seems logical that where one fades in, the other one will do the opposite transition. In this case: fade out. Perhaps these could be their own 'class' of animations the library could provide.

If this is a feature you feel has merit being implemented, I'd also be happy to help in whichever way I can. I was very happy to see this library existed, because it got me up and running very quickly with animating my web application; as such, it seems like a shame that transitions for the router-outlet would still 'require' one to write their own transition, however easy the transition might be.

Thank you for your response.

[filipows]

Thanks, @Lerke for a nice write-up and sharing your thoughts. I definitely see the merit of having routing animations included in the library as that's a very common use case and I think it would be of great value for other people as well.

I'll investigate what we could do and I'll get back to you.

[mac1253]

Great idea. Was looking for this as well! The workaround will do for now. @filipows What might you recommend if you want a leaving animation for a page. Ex: Home page slides from bottom, upon leaving, slides up into the top.