Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

VueJs router-view transitions

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;
}
like image 946
TomMi DumMi Avatar asked Feb 23 '17 05:02

TomMi DumMi


People also ask

How do I add transitions to my Vue router?

Adding Vue Router Transitions to Your App In old versions of Vue Router, we could simply wrap <router-view> with the <transition> component. However, in newer versions of Vue Router, we have to use the v-slot to destructure our props and pass them to our inner slot.

What is router view Vue?

The RouterView or router-view component is used to display the current route the user is at. Source: vue-router.d.ts /** * Component to display the current route the user is at.

How do Vue transitions work?

Vue will automatically sniff whether the target element has CSS transitions or animations applied. If it does, a number of CSS transition classes will be added / removed at appropriate timings. If there are listeners for JavaScript hooks, these hooks will be called at appropriate timings.


1 Answers

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.

like image 160
Saurabh Avatar answered Oct 14 '22 21:10

Saurabh