search

filipows / angular-animations

:sparkles: Easy, Reusable Animation Utility library for Angular
https://filipows.github.io/angular-animations
MIT License
631 stars 89 forks source link

Example to use this within router-outlet ? #35

Open Romain-P opened 5 years ago

Romain-P commented 5 years ago

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 commented 4 years ago

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

filipows commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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 commented 3 years ago

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.