Nuxt.js v2.7+ introduit pageTransition en lieu et place de transition pour améliorer le nommage avec les transitions de mise en page. Avec Nuxt 3, transition sera déprécié.

• Type : String ou Object ou Function

Pour définir une transition personnalisée pour une route spécifique, ajoutez la propriété pageTransition au composant de page.

export default {
  // Peut-être une chaine de caractères
  pageTransition: ''
  // Ou un objet
  pageTransition: {}
  // Ou une fonction
  pageTransition (to, from) {}
}

Chaine de caractères

Si la propriété pageTransition est définie en tant que chaine de caractère, elle sera utilisée comme transition.name.

export default {
  pageTransition: 'test'
}

Nuxt.js utilisera ces paramètres pour définir le composant comme suit :

<transition name="test">

Objet

Si la propriété pageTransition est un objet :

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

Nuxt.js utilisera ces paramètres pour définir le composant comme suit :

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

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

Propriété	type	défaut	définition
name	String	"page"	Le nom de la transition appliqué aux transitions de route.
mode	String	"out-in"	Le mode de la transition appliqué aux routes. Voir la documentation Vue.js.
css	Boolean	true	Défini s'il faut utiliser les transitions de classes CSS. Par défaut à true. Si mis à false, cela ne déclenchera que les points d'ancrage JavaScript abonnés via les évènements de composant.
duration	Integer	aucune	La durée (en millisecondes) appliquée a une transition, voir la documentation Vue.js.
type	String	aucune	Spécifie le type d'évènement de transition attendu pour déterminer le moment de fin de transition. Les valeurs disponibles sont "transition" et "animation". Par défaut, cela sera automatiquement déterminé s'il n'y a pas de durée précisée.
enterClass	String	aucune	L'état de départ de la classe de transition. Voir la documentation Vue.js.
enterToClass	String	aucune	L'état final de la transition. Voir la documentation Vue.js.
enterActiveClass	String	aucune	La classe appliquée pendant l'intégralité de la transition. Voir la documentation Vue.js
leaveClass	String	aucune	L'état de départ de la classe de transition. Voir la documentation Vue.js.
leaveToClass	String	aucune	L'état final de la transition. Voir la documentation Vue.js.
leaveActiveClass	String	aucune	La classe appliquée pendant l'intégralité de la transition. Voir la documentation Vue.js.

Vous pouvez également définir des méthodes dans l'objet pageTransition afin de pouvoir utiliser des points d'ancrage JavaScript :

• beforeEnter(el)
• enter(el, done)
• afterEnter(el)
• enterCancelled(el)
• beforeLeave(el)
• leave(el, done)
• afterLeave(el)
• leaveCancelled(el)

Note : c'est une bonne pratique que de définir explicitement css: false pour les transitions uniquement JavaScript afin que Vue passe la détection CSS. Cela prévient également les potentielles interférences entre les déclarations CSS.

Mode de transition

Le mode par défault pour les transitions diffère de Vue.js. Le mode par défaur pour pageTransition est out-in. Si vous voulez avoir les transitions de sortie et d'entrée en même temps, vous devez mettre mode: ''.

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

Fonction

Si la propriété pageTransition est une fonction :

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

Transitions appliquées à la navigation :

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

⚠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 !