Adding transitions between your routes

We explored transitions in detail in Chapter 3, Transitions and Animations. Here, we will use them when changing routes instead of changing elements or components. The same observations apply here as well.

Getting ready

Before trying this recipe, I highly suggest that you complete some recipes in Chapter 3, Transitions and Animations, as well as this one. This recipe is a mixture of concepts learned up to now.

How to do it…

In this recipe, we will build a website for a restaurant for ghosts. It won't be much different from the website of a regular restaurant, except for the requirements that the pages must fade instead of appearing instantly.

Let's put down some HTML layout, shall we:

<div id="app">
  <h1>Ghost's Restaurant</h1>
  <ul>
    <li><router-link to="/">Home</router-link></li>
    <li><router-link to="/menu">Menu</router-link></li>  
  </ul>
  <transition mode="out...