fixes #80

[antonisntoulis]

Related Issues

80

Description

We use mutation observer to observe when splide dom element gets removed from the dom before destroying the splide instance to avoid #80

[wtfz]

@antonisntoulis I have the same issue too with my slide transition, the de-styled splide was shown during transition. Any workaround without changing Splide.vue?

[antonisntoulis]

@antonisntoulis I have the same issue too with my slide transition, the de-styled splide was shown during transition. Any workaround without changing Splide.vue?

Honestly, I would start with considering using some other carousel library like swiperjs, since splide seems abandoned.

As for a fix that doesn't include changing the sllide.vue, what I was able to do in a project was to watch what classes are removed when the slider is unmounted, usually the biggest change is the flex being removed and the slides becoming stacked one on top of the other, so apply a flex with css to your slide container.

After that the movement should be minimized but still visible, so you can fade out the slider using the onBeforeUnmount hook or something similar.

Hope I helped.

[doutatsu]

@antonisntoulis Did you end up switching to swiperjs or another library? I've tested swiper as well as others, and found that splidejs performance remains unmatched compared to other libraries, which is why I want to continue using it 😫

[antonisntoulis]

@antonisntoulis Did you end up switching to swiperjs or another library? I've tested swiper as well as others, and found that splidejs performance remains unmatched compared to other libraries, which is why I want to continue using it 😫

It's been a while since I last used a carousel library and I agree that splidejs is so good, but considering it has been abandoned for almost a year it's probably wise to move on to something more actively maintained. I believe it might be a good time for a fork of Splidejs to appear.

[doutatsu]

@antonisntoulis Yup, I made a fork with minor changes I needed, like this issue here - It has vast enough functionality, that even without maintenance I imagine it'll work well for awhile. It's a shame it got abandoned... I hope it'll get revived eventually

[sambedingfield]

This issue is my only gripe with this library with the Vue integration.

It does bring up a larger topic though, where perhaps Vue destroy / unmount hooks should be triggered after Vue transitions finish (or an additional hook added?), as this isn't the only Vue library affected by this.

I was using vanilla Splide with Vue 2 for a long while, and used this mixin as a solution. Real shame to see this issue occur with the intended Vue 3 adaption after I've migrated over.

As a workaround, I'm patching the vue-splide library instead of forking and adding a quick n' dirty timeout prop. Eg:

  ...
  props: {
   delayUnmount: {
      default: 0,
      type: Number
    },
  },
  ...
  onBeforeUnmount(() => {
    setTimeout(() => {
      splide.value?.destroy();
    }, props.delayUnmount);
  });
  ...

<splide :delay-unmount="transitionDuration">

Be great to get an official fix though.