Jetez un coup d'œil à notre nouvelle documentation (beta) . Have fun !

API : la propriété transition

Nuxt.js utilise le composant de <transition> afin de créer des transitions / animations époustouflantes entre vos pages.

  • Type : String ou Object ou Function

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

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

Chaine de caractères

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

export default {
  transition: 'test'
}

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

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

Objet

Si la propriété transition est un objet :

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

Nuxt.js utilisera 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étypedéfautdéfinition
nameString"page"Le nom de la transition appliqué aux transitions de route.
modeString"out-in"Le mode de la transition appliqué aux routes. Voir la documentation Vue.js.
cssBooleantrueDé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.
durationIntegeraucuneLa durée (en millisecondes) appliquée a une transition, voir la documentation Vue.js.
typeStringaucuneSpé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.
enterClassStringaucuneL'état de départ de la classe de transition. Voir la documentation Vue.js.
enterToClassStringaucuneL'état final de la transition. Voir la documentation Vue.js.
enterActiveClassStringaucuneLa classe appliquée pendant l'intégralité de la transition. Voir la documentation Vue.js
leaveClassStringaucuneL'état de départ de la classe de transition. Voir la documentation Vue.js.
leaveToClassStringaucuneL'état final de la transition. Voir la documentation Vue.js.
leaveActiveClassStringaucuneLa 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 transition 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 transition 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 {
  transition: {
    name: 'test',
    mode: ''
  }
}

Fonction

Si la propriété transition est une fonction :

export default {
  transition(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.
La contribution pour cette page est maintenant fermée. Si vous souhaitez contribuer, veuillez consulter notre nouvelle documentation . Have fun !

Platinum Sponsors

StoryblokMoovweb Support Us