Making transitions with the layoutTransition property

CSS transitions are not only applicable to page components but also to layouts. The default for this layoutTransition property is the following:

{
  name: 'layout',
  mode: 'out-in'
}

So, the prefix of the layout transition classes is layout by default and the default transition mode is out-in. Let's see how transitions can be done by creating a global transition for all layouts with the following steps:

1. Create the about.vue and user.vue layouts in the /layouts/ directory, as follows:

// layouts/about.vue
<template>
  <div>
    <p>About layout</p>
    //...
    <nuxt />
  </div>
</template>

2. Apply the preceding layouts to the about.vue and users.vue pages in the /pages/ directory, as follows:

// pages/about.vue
<script>
export default {
  layout: 'about'
}
</script>

3. Create a transition.css file in the /assets/ directory and add the following transition to...