Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Single Page Applications Chapter 15

Note how we wrapped the main router display port with a transition tag. The mode

out-in is set because we want the animation for the disappearing component to finish

before the other component appears. If we hadn't we set that, the two fading components
would be stacked for a brief time. For a more detailed discussion, you can refer to the

Letting an element leave before the enter phase in a transition recipe.

Let's create the two pages/components:

const Home = { template: '<div>Welcome to Ghost's</div>' }

const Menu = { template: '<div>Today: invisible cookies</div>' }

Now, let's register routes:

Vue.use(VueRouter)

const router = new VueRouter({

routes: [

{ path: '/', component: Home },

{ path: '/menu', component: Menu }

]

})

Before launching the application, instantiate a Vue object:

new Vue({

router,

el: '#app'

})

For the transition to work, you have to add a few CSS rules:

.v-enter-active, .v-leave-active {

transition: opacity .5s;

}

.v-enter, .v-leave-active {

opacity: 0

}

Launch your application now. You successfully added a fade transition between page

changes.