VueJs router-view transitions

Question

I am trying to create some transitions on my router-view components every time I click a new link. The problem is that only one of the fade animations will work. For example, it will fade out, but the new page will appear immediately like normal. Basically I can only have either an enter-active-class or a leave-active-class, but not both at the same time.

<template>

    <div class="tom-layout">
        <navBar class="z-depth-0"></navBar>
        <div class="content-layout">
            <transition name="fade">
                <router-view></router-view>
            </transition>
        </div>
    </div>

</template>

<script>
    import NavBar from './components/NavBar.vue';

    export default {
        components: {
            navBar: NavBar
        }
    }

</script>

<style lang="scss">
    @import url('https://fonts.googleapis.com/css?family=Ek+Mukta');

    body {

        overflow: hidden;

        .content-layout {
            margin-top: -64px;
            width: 100%;
            z-index: -5;
        }
    }   


.fade-enter {
    opacity: 0;
}

.fade-enter-active {
    transition: opacity 2s ease;
}

.fade-leave {

}

.fade-leave-active {
    transition: opacity 2s ease;
    opacity: 0;
}

tony19 · Accepted Answer · 2022-07-15 19:49:40Z

34

I am just using mode: out-in it seems to working fine with:

  <transition name="fade" mode="out-in">
    <router-view></router-view>
  </transition>

Please check working fiddle.

edited Jul 15, 2022 at 19:49

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 23, 2017 at 6:26

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TomMi DumMi Over a year ago

Thanks. This fixes the issue. Another solution I found was to add a transition-delay to .fade-enter-active with the same duration as the transition. .fade-enter-active { transition: opacity 0.25s ease; transition-delay: 0.25s; }

MD.ALIMUL Alrazy · Accepted Answer · 2020-03-12 08:57:32Z

0

you can try dynamic binding for routing transition:

<router-view :transition="$route.transition">
And set the data of transition from your route data

router.map({
  '/About': {
    component: { ... },
    transition: 'slide'
  }
})

answered Mar 12, 2020 at 8:57

MD.ALIMUL Alrazy

3401 gold badge7 silver badges17 bronze badges

1 Comment

anakha Over a year ago

router.map has been replaced with array literals. vuejs.org/v2/guide/…

Collectives™ on Stack Overflow

VueJs router-view transitions

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related