Transition Option

[BenjaminOddou]

Hey 👋,

I am trying to implement transitions in my gallery. However, it seems laggy when there is a lot of elements. I just saw that there is a special component for transitioning lists of items (<TransitionGroup>). Maybe it can be incorporated as an option in the plugin ?

Documentation

[DerYeger]

Thanks for the suggestion!

I implemented a prototype, but I don't think it makes sense to use a TransitionGroup with this package. Since both columns and items change on every change to the items prop, all animations play every time, regardless of the individual item.

[BenjaminOddou]

ok I understand. So there is no proper way to implement transition in this module ? Another question not related to the topic directly but is there a way to rerender the elements (redraw) when a button is clicked ?

[DerYeger]

You'll have to publish a reproduction if you need my help.

Did you try @click="() => { imageNumber = imageNumber + 25" }?

[BenjaminOddou]

Hey @DerYeger, the error message doesn't seems to be linked to my issues (apologies). This is only happening in Safari (even on your demo)

Maybe this can help ? (juggle/resize-observer#115)

I can't really replicate sample from my project for now. What I was looking for is advice about the way implement new items. I know that the common way to do it is to use spread operator to recreate the items prop but for my use case I am not sure how to implement it. 😅

Also this code is working I mean I can see new images coming but for some reason it happens sometimes that new images are not spread correctly between the different columns (like 10 images in 1 col). I tried to await the refresh but it still seems to 'bug' on some situations. As I don't really understand why, I'd like to know if there is a way for us to manually trigger the render function of the plugin.

Thank you for your patience and all your time you took to respond, I truly appreciate it 🙂

[DerYeger]

Again, I just cant help without a reproduction.

Last tip I can give is not refreshing your fetch call (since the fetched data doesn't change), and instead performing the filter, sort, and slice in a computed.
This would also make your watch redundant.

[BenjaminOddou]

Thank you so much @DerYeger, your last tip helped me to figure out my problem. It's way more fluid now without having to refresh the API 🙂.

[DerYeger]

Thank you so much @DerYeger, your last tip helped me to figure out my problem. It's way more fluid now without having to refresh the API 🙂.

Awesome!