Page traduite Le contenu de cette page peut être déprécié.
Lire la page originale Contribuer à cette traduction

Transitions

Nuxt utilise le composant <transition> pour permettre de créer de superbes transitions/animations entre nos routes.

Pour définir une transition personnalisée pour une route spécifique, il faut ajouter la propriété transition au composant page.

pages/index.vue
export default {
  // peut être une chaîne de caractères
  transition: ''
  // ou un objet
  transition: {}
  // ou une fonction
  transition (to, from) {}
}

Chaîne de caractères

Si la propriété transition est une chaîne de caractères, ce sera utilisé comme transition.name.

pages/index.vue
export default {
  transition: 'home'
}

Nuxt va utiliser ces paramètres pour configurer le composant comme suit:

pages/index.vue
<transition name="home"></transition>
Ceci est fait automatiquement pour nous et nous n'avons pas besoin d'ajouter de composant <transition> à nos pages ou layouts.

Maintenant, il ne nous reste plus qu'à créer la nouvelle classe pour nos transitions.

pages/index.vue
<styles>
  .home-enter-active, .home-leave-active { transition: opacity .5s; }
  .home-enter, .home-leave-active { opacity: 0; }
</styles>

Objet

Si la propriété transition est un objet:

pages/index.vue
export default {
  transition: {
    name: 'home',
    mode: 'out-in'
  }
}

Nuxt va utiliser ces paramètres pour configurer le composant comme suit:

pages/index.vue
<transition name="test" mode="out-in"></transition>

L'objet transition peut avoir des propriétés telles que le nom, le mode, le CSS, la durée et encore tout plein d'autres ! La documentation de Vue a plus d'informations sur ce sujet. On peut aussi définir des méthodes dans la propriété transition de la page.

export default {
  transition: {
    afterLeave(el) {
      console.log('afterLeave', el)
    }
  }
}

Mode de transition

La mode de transition par défaut pour les pages diffère de celui de Vue.js. Ici, le mode par défaut est à out-in. Si l'on souhaite avoir des transitions d'entrée/sortie simultanées, il faudra changer le mode en lui attribuant une chaîne de caractères vide mode: ''.
pages/index.vue
export default {
  transition: {
    name: 'home',
    mode: ''
  }
}

Function

Si la propriété transition est une fonction:

pages/index.vue
export default {
  transition(to, from) {
    if (!from) {
      return 'slide-left'
    }
    return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left'
  }
}

Voici ce que cela va générer comme transitions:

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

Paramètres globaux

Le nom de la transition par défaut de Nuxt est "page". Pour ajouter une transition d'estompage à chaque page de notre application, nous avons seulement besoin d'un fichier CSS qui est partagé entre toutes les routes.

Notre fichier global CSS assets/main.css:

assets/main.css
.page-enter-active,
.page-leave-active {
  transition: opacity 0.5s;
}
.page-enter,
.page-leave-to {
  opacity: 0;
}

Nous l'ajoutons à notre tableau CSS dans le fichier nuxt.config.js:

nuxt.config.js
export default {
  css: ['~/assets/main.css']
}

Paramètres de configuration

La propriété layoutTransition

layoutTransition est utilisée pour définir les propriétés par défaut pour les transitions du layout.

Les paramètres par défaut sont:

{
  name: 'layout',
  mode: 'out-in'
}
assets/main.css
.layout-enter-active, .layout-leave-active {
  transition: opacity .5s
}
.layout-enter, .layout-leave-active {
  opacity: 0
}

Pour les changer, rendons-nous dans le fichier nuxt.config.js:

nuxt.config.js
export default {
  layoutTransition: 'mes-layouts'
  // ou
  layoutTransition: {
    name: 'mes-layouts',
    mode: 'out-in'
  }
}
assets/main.css
.mes-layouts-enter-active,
.mes-layouts-leave-active {
  transition: opacity 0.5s;
}
.mes-layouts-enter,
.mes-layouts-leave-active {
  opacity: 0;
}

La propriété pageTransition

Les paramètres par défaut sont:

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

Pour les changer, rendons-nous dans le fichier nuxt.config.js

nuxt.config.js
export default {
  pageTransition: 'ma-page'
  // ou
  pageTransition: {
    name: 'ma-page',
    mode: 'out-in',
    beforeEnter (el) {
      console.log('Avant de rentrer...');
    }
  }
}

Si l'on modifie pageTransition, il faudra faire attention à renommer les classes CSS qui vont avec.

assets/main.css
.ma-page-enter-active,
.ma-page-leave-active {
  transition: opacity 0.5s;
}
.ma-page-enter,
.ma-page-leave-to {
  opacity: 0;
}