Add delay between Vue router-view transitions

Question

I'm trying to do some delay between route changes.

For example user clicks on router-link and after previous View faded out I want to show some kind of Priomise based loading animation before next View's fade in. Here's my code:

<nav>
    <router-link to="/">Home</router-link>
    |
    <router-link to="/about">About</router-link>
</nav>
<router-view v-slot="{ Component }">
    <transition
        mode="out-in"
        name="custom-classes"
        enter-active-class="fade-enter-active"
        leave-active-class="fade-leave-active"
        enter-from-class="fade-enter-from"
        leave-to-class="fade-leave-to"
    >
        <component :is="Component" :key="$route.path"/>
    </transition>
</router-view>

<style lang="less">

    .fade-enter-active,
    .fade-leave-active {
        transition: opacity .5s ease;
    }

    .fade-enter-from,
    .fade-leave-to {
        opacity: 0;
    }
</style>

I've tried some custom classes but don't know how to stop between transitions.

score 0 · Answer 1 · answered Oct 11 '22 at 17:55

In case someone's looking for same problem I've ended up with the following code.

<nav>
    <router-link to="/">Home</router-link>
    |
    <router-link to="/about">About</router-link>
</nav>
<router-view v-slot="{ Component }">
    <transition
        mode="out-in"
        name="custom-classes"
        enter-active-class="fade-enter-active"
        leave-active-class="fade-leave-active"
        enter-from-class="fade-enter-from"
        leave-to-class="fade-leave-to"
    >
        <component :is="Component" :key="$route.path" v-if="component_visible"/>
    </transition>
</router-view>

I've added v-if for the <component/> based on computed property

computed: {
    component_visible() {
        return this.$store.state.common.transition;
    }
}

And then just change it's value in any place that needed.

Add delay between Vue router-view transitions

1 Answers1