Nuxt 3 is out! Discover more about it on v3.nuxtjs.org
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;
}
Editer cette page sur GitHub Mise à jour le mar. 6 décembre 2022
Clément Ollivier Clément Ollivier Daniel Roe Daniel Roe Alex Hirzel Alex Hirzel Ajeet Chaulagain Ajeet Chaulagain René Eschke René Eschke Sébastien Chopin Sébastien Chopin Nico Devs Nico Devs Muhammad Muhammad Nazaré da Piedade Nazaré da Piedade Naoki Hamada Naoki Hamada Tom Tom Yann Aufray Yann Aufray Anthony Chu Anthony Chu Nuzhat Minhaz Nuzhat Minhaz Lucas Portet Lucas Portet Richard Schloss Richard Schloss Xanzhu Xanzhu bpy bpy Antony Konstantinidis Antony Konstantinidis Hibariya Hibariya Jose Seabra Jose Seabra Eze Eze Florian LEFEBVRE Florian LEFEBVRE Lucas Lucas Julien SEIXAS Julien SEIXAS Hugo Hugo Sylvain Marroufin Sylvain Marroufin Spencer Cooley Spencer Cooley Piotr Zatorski Piotr Zatorski Vladimir Semenov Vladimir Semenov Harry Allen Harry Allen kazuya kawaguchi kazuya kawaguchi Unai Mengual Unai Mengual Hyunseung Lee Hyunseung Lee Alexandre Chopin Alexandre Chopin pooya parsa pooya parsa Nick Medrano Nick Medrano Mosaab Emam Mosaab Emam Iljs Путлер Капут Iljs Путлер Капут Heitor Ramon Ribeiro Heitor Ramon Ribeiro Nero Nero Yoon Han Yoon Han Ikko Ashimine Ikko Ashimine FamCodings FamCodings Ayouli Ayouli F. Hinkelmann F. Hinkelmann felipesuri felipesuri Christophe Carvalho Vilas-Boas Christophe Carvalho Vilas-Boas Leoš Literák Leoš Literák Trizotti Trizotti Marcello Bachechi Marcello Bachechi Rodolphe Rodolphe Thomas Underwood Thomas Underwood Shek Evgeniy Shek Evgeniy Lukasz Formela Lukasz Formela Hugo Torzuoli Hugo Torzuoli