search

mikoskinen / Blazor.Animate

Easily add fade, slide and zoom-effects into your Blazor applications.
MIT License
282 stars 36 forks source link

Question: Can I use this library to animate cards on and off screen? #3

Closed ghost closed 4 years ago

ghost commented 4 years ago

Apologies for the newbie question: I have a card centered on the screen. When the next button is clicked, I need to animate the card off-screen and the next card on screen. When the previous button is clicked, I need to animate the card off-screen and the next card on screen.

I was thinking I need to have overlapping div's and then run the two animations at the same time.

Suggestions, thank you, Karl

mikoskinen commented 4 years ago

Not a newbie question at all :) Unfortunately currently this library is not that good at moving components off-screen/hiding them. Couple ideas come to mind:

1) I'm wondering if you could use the built-in support of anchoring to handle this. But it might be that isn't enough.

2) It could be possible hook the next and previous buttons into methods which use RenderFragments to create the animated cards. If you create a RenderFragment which includes the Animate-component and the card inside it, its entrance should be animated. But animating the card's transition to off-screen is again the hard part.

Overall I think it's quite unlikely that you can't do this currently with Blazor.Animate. It could be maybe doable if you could trigger the animations manually. This would be a good addition to the library so I'll check if I can come up with something.

ghost commented 4 years ago

@mikoskinen thank you for your response. I was trying to emulate a carousel. Best to you, Karl