API : la propriété pageTransition (EN)
Nuxt.js v2.7+ introduit
pageTransition
en lieu et place detransition
pour améliorer le nommage avec les transitions de mise en page. Avec Nuxt 3,transition
sera dérpécié.
- Type :
String
ouObject
ouFunction
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 our 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 !
Contributors
Vous avez vu une erreur ou vous souhaitez contribuer à la documentation ? Éditez cette page sur GitHub !