To define a custom transition for a specific route add the key to the page component.

pages/index.vue

If the transition key is set as a string, it will be used as the transition.name.

pages/index.vue

  1. export default {
  2.   transition: 'home'
  3. }

Nuxt.js will use these settings to set the component as follows:

pages/index.vue

  1. <transition name="home"></transition>

This is automatically done for you and you do not need to add the <transition> component to your pages or layouts.

Now all you have to do is create the new class for your transitions.

pages/index.vue

  1. <style>
  2.   .home-enter-active, .home-leave-active { transition: opacity .5s; }
  3.   .home-enter, .home-leave-active { opacity: 0; }
  4. </style>

If the transition key is set as an object:

pages/index.vue

  1. export default {
  2.   transition: {
  3.     name: 'home',
  4.     mode: 'out-in'
  5.   }
  6. }

pages/index.vue

  1. <transition name="home" mode="out-in"></transition>

The transition object can have many properties such as name, mode, css, duration and many more. Please see the vue docs for more info.

You can also define methods in the page transition property, for more information on the JavaScript hooks see the vue docs.

Transitions - 图2

The default transition mode for pages differs from the default mode in Vue.js. The transition mode is by default set to out-in. If you want to run leaving and entering transitions simultaneously, you have to set the mode to the empty string mode: ''.

pages/index.vue

  1. export default {
  2.   transition: {
  3.     name: 'home',
  4.     mode: ''
  5.   }
  6. }

If the transition key is set as a function:

pages/index.vue

  1. export default {
  2.     if (!from) {
  4.     }
  5.     return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left'
  6.   }
  7. }

Transitions applied on navigation:

/ to /posts => slide-left,/posts to /posts?page=3 => slide-left,/posts?page=3 to /posts?page=2 => slide-right.

The Nuxt.js default transition name is "page". To add a fade transition to every page of your application, all you need is a CSS file that is shared across all your routes.

Our global css in assets/main.css:

  1. .page-enter-active,
  2. .page-leave-active {
  3.   transition: opacity 0.5s;
  4. }
  5. .page-enter,
  6. .page-leave-to {
  7.   opacity: 0;
  8. }

Then we add its path to the css array in our nuxt.config.js file:

nuxt.config.js

  1. export default {
  2.   css: ['~/assets/main.css']
  3. }

The layout transition is used to set the default properties of the layout transitions.

The default settings for layout transitions are:

  1. {
  2.   name: 'layout',
  3.   mode: 'out-in'
  4. }

assets/main.css

If you want to change the default settings for your layout transitions you can do so in the nuxt.config.js file.

nuxt.config.js

  1. export default {
  2.   layoutTransition: 'my-layouts'
  4.   layoutTransition: {
  5.     name: 'my-layouts',
  6.     mode: 'out-in'
  7.   }
  8. }

assets/main.css

  1. .my-layouts-leave-active {
  2.   transition: opacity 0.5s;
  3. }
  4. .my-layouts-enter,
  5. .my-layouts-leave-active {
  6.   opacity: 0;
  7. }

The default settings for page transitions are:

  1. {
  2.   name: 'page',
  3.   mode: 'out-in'
  4. }

Should you wish to modify the default settings you can do so in the nuxt.config.js

nuxt.config.js

  1. export default {
  2.   pageTransition: 'my-page'
  3.   // or
  4.   pageTransition: {
  5.     name: 'my-page',
  6.     mode: 'out-in',
  7.     beforeEnter (el) {
  8.       console.log('Before enter...');
  9.     }
  10.   }
  11. }

If you do modify the page Transition name you will also have to rename the css class.

  1. .my-page-enter-active,
  2. .my-page-leave-active {
  3.   transition: opacity 0.5s;
  4. }
  5. .my-page-enter,
  6. .my-page-leave-to {