The transition Property (En)

  • Type: String or Object

Used to set the default properties of the page transitions.

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

Default:

```js { name: 'page', mode: 'out-in' } ```

Example (nuxt.config.js):

module.exports = {
  transition: 'page'
  // or
  transition: {
    name: 'page',
    mode: 'out-in',
    beforeEnter (el) {
      console.log('Before enter...');
    }
  }
}

The transition key in nuxt.config.js is used to set the default properties for the page transitions. To learn more about the available keys when the transition key is an object, see the pages transition property.

The layoutTransition Property

  • Type: String or Object

Used to set the default properties of the layout transitions. Configurations are same as layout

Default:

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

Example (nuxt.config.js):

module.exports = {
  layoutTransition: 'layout'
  // or
  layoutTransition: {
    name: 'layout',
    mode: 'out-in'
  }
}

Example global css:

.layout-enter-active, .layout-leave-active {
  transition: opacity .5s
}
.layout-enter, .layout-leave-active {
  opacity: 0
}

Vous avez vu une erreur ou vous souhaitez contribuer à la documentation ? Éditez cette page sur GitHub !