Some transitions are not working properly with css resizing

[Stefan Todorov]

Hello,
I am trying to implement this gallery as banner, and I need to make sure all images are stretched in the container. To be able to resize the gallery I am using:

.vue-flux {
  height: 100%;
  width: 100%;
}

After I apply this CSS there is a problem with some of the animations/transitions. I get this console error:

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'forEach' of undefined"


found in


---> <FluxTransition>

       <VueFlux>

         <GalleryOne> at /src/components/GalleryOne.vue

           <App> at /src/App.vue

             <Root>

Can you please confirm if this is the right way to resize the gallery?

Full working example:

1. My test case https://codesandbox.io/s/staging-snow-94uyg?file=/src/App.vue
2. Only preview https://94uyg.csb.app/

Thank you for your time!

[ragnarlotus]

Hello and sorry for the late answer, it had a few busy days.

Doing some tests I noticed that:

• removing the second slider there is no error
• changing the height of the second slider to a px unit there is no error

So I suspect about some kind of problem detecting the size when height is defined in %. Unfortunately I can't give you more info until I review deeper the source code. I will have some time to spare this weekend to find the issue and make a new release.

Thanks a lot for reporting and creating the examples, really helped me a lot!

Regards!

[Stefan Todorov]

Thanks for answering.

I am glad to hear it was useful (it was the idea of one ofmy colleagues). We are going probably to use one of the other animations for now.

If you need help with the project I can try to contribute for this awesome gallery.

Thanks again!

[ragnarlotus]

No problem! I really appreciate the time for opening the issue and the demo.

As you are going to use another slider I will take it easy and fix it in next major version unless anybody else needs this.

Right now I'm porting the slider to Vue 3 composition API to reduce the size and improve performance, but feel free to contribute with any code review or improvement you find 😉 . Most of the code will remain the same as the basic logic will not change but adding support for other resources than just images.

Thank you and regards!!

[ragnarlotus]

The problem was caused by:

.row {
  width: 1599px;
  height: 899.438px;
}

removing those works perfect 😁