You are browsing Nuxt 2 docs. Go to Nuxt 3 docs, or learn more about Nuxt 2 Long Term Support.

Page traduite Le contenu de cette page peut être déprécié.

La propriété transition

Nuxt utilise le composant <transition> pour nous permettre de créer et appliquer de superbes transitions/animations lors de la navigation entre les pages.


  • Type: String ou Object ou Function

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

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 le paramètre transition est défini en tant que chaîne de caractères, il sera utilisé sous la forme transition.name.

export default {
  transition: 'test'
}

Nuxt va utiliser ces paramètres pour définir le composant comme suit:

<transition name="test"></transition>

Objet

Si la propriété transition est définie en tant qu'objet:

export default {
  transition: {
    name: 'test',
    mode: 'out-in'
  }
}

Nuxt va utiliser ces paramètres pour définir le composant comme suit:

<transition name="test" mode="out-in"></transition>

L'objet transition peut avoir les propriétés suivantes:

Propriété Type Par défaut Définition
name String "page" Le nom de la transition appliquée à toutes les transitions de routes.
mode String "out-in" Le mode qui s'applique aux transitions sur toutes les routes, se référer à la documentation de Vue.js .
css Boolean true Définit l'application ou non des classes CSS sur les transitions. Si définit à false, seulement les hooks JavaScript définis par des événements seront exécutés.
duration Integer non défini La durée (en millisecondes) appliquée à la transition, voir la documentation de Vue.js .
type String non défini Spécifie le type des événements de transition à attendre pour déterminer la fin d'une transition. Les valeurs disponibles sont "transition" et "animation". Par défaut, le type qui a la plus longue durée sera choisi.
enterClass String non défini Le state du départ d'une classe de transition. Voir la documentation de Vue.js .
enterToClass String non défini Le state de fin d'une classe de transition. Voir la documentation de Vue.js .
enterActiveClass String non défini La classe appliquée pendant l'intégralité de la durée de la transition. Voir la documentation de Vue.js .
leaveClass String non défini Le state du départ d'une classe de transition. Voir la documentation de Vue.js .
leaveToClass String non défini Le state de fin d'une classe de transition. Voir la documentation de Vue.js .
leaveActiveClass String non défini La classe appliquée pendant l'intégralité de la durée de la transition. Voir la documentation de Vue.js .

On peut aussi définir des méthodes dans la propriété transition de la page, celles-ci sont pour des hooks JavaScript :

  • beforeEnter(élément)
  • enter(élément, terminé)
  • afterEnter(élément)
  • enterCancelled(élément)
  • beforeLeave(élément)
  • leave(élément, terminé)
  • afterLeave(élément)
  • leaveCancelled(élément)
export default {
  transition: {
    afterLeave(élément) {
      console.log('afterLeave', élément)
    }
  }
}

Note: une bonne pratique serait d'explicitement déclarer css:false pour des transitions uniquement en JavaScript, ainsi Vue pourra ignorer la détection du CSS. Cela prévient de plus de potentiels conflits accidentels avec des règles CSS.

Mode de transition

Le mode de transition par défaut pour les pages est différent de celui de Vue.js. Il est défini à out-in. Si l'on souhaite exécuter les transitions entrantes et sortantes simultanément, il faut passer le mode à une chaîne de caractères vide mode: ''.

export default {
  transition: {
    name: 'test',
    mode: ''
  }
}

Fonction

Si la propriété transition est définie en tant que fonction:

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 lors de la navigation:

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