La propriété `transition` de la page

Nuxt.js 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.js 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.js 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éTypePar défautDéfinition
nameString"page"Le nom de la transition appliquée à toutes les transitions de routes.
modeString"out-in"Le mode qui s'applique aux transitions sur toutes les routes, se référer à la documentation de Vue.js.
cssBooleantrueDé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.
durationIntegernon définiLa durée (en millisecondes) appliquée à la transition, voir la documentation de Vue.js.
typeStringnon définiSpé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.
enterClassStringnon définiLe state du départ d'une classe de transition. Voir la documentation de Vue.js.
enterToClassStringnon définiLe state de fin d'une classe de transition. Voir la documentation de Vue.js.
enterActiveClassStringnon définiLa classe appliquée pendant l'intégralité de la durée de la transition. Voir la documentation de Vue.js.
leaveClassStringnon définiLe state du départ d'une classe de transition. Voir la documentation de Vue.js.
leaveToClassStringnon définiLe state de fin d'une classe de transition. Voir la documentation de Vue.js.
leaveActiveClassStringnon définiLa 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

Vous avez vu une erreur ou vous souhaitez contribuer à la documentation ? Éditez cette page sur GitHub !