Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
michaelprys opened this issue Feb 14, 2024 · 0 comments
Open

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

michaelprys opened this issue Feb 14, 2024 · 0 comments

Comments

@michaelprys
Copy link

michaelprys commented Feb 14, 2024

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.

keen-slider.bug.mp4

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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant