Keen-slider doesn't work properly with vue-transition.

[michaelprys]

If you add transition in RouterView and try to change the route, by clicking on some router-link, during the transition you'll see all of the slides at once and they shrink. It doesn't happen with swiper.js, so I suppose it's a bug. Please, pause on 00:01 to see the issue. Adding a delay to container.destroy(); in onBeforeUnmount hook didn't solve the issue.

https://github.com/rcbyr/keen-slider/assets/112334637/0caca654-3a13-4e69-b865-ee688a88cd97

Here's are slider options:

import { useKeenSlider } from 'keen-slider/vue';

const [container] = useKeenSlider({
    loop: false,
    spacing: 40,
    slides: {
        perView: 3,
    },
    breakpoints: {
        '(width <= 1280px)': {
            slides: { perView: 2, spacing: 40 },
        },
        '(width <= 900px)': {
            slides: { perView: 1 },
        },
    },
});

template:

<template>
    <div class="keen-slider" ref="container">
        <div
            class="keen-slider__slide"
            v-for="recipe in storeRecipe.popularRecipes"
            :key="recipe.recipe_id">
            <ItemCard :recipe="recipe" :pending="storeRecipe.pending" />
        </div>
    </div>
</template>

vue-transition in RouterView:

<main>
    <RouterView #="{ Component }">
        <Transition mode="out-in" name="fade">
            <component :is="Component" :key="route.path" />
        </Transition>
    </RouterView>
</main>

vue-transition styles:

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
    opacity: 0;
}