# Transition Class Change
breaking
# Vue d'ensemble
La classe de transition v-enter a été renommée en v-enter-from et la classe de transition v-leave a été renommée en v-leave-from.
# Syntaxe 2.x
Avant la v2.1.8, nous avions deux classes de transition pour chaque direction de transition : les états initial et actif.
Dans la v2.1.8, nous avons introduit v-enter-to pour résoudre le problème du décalage entre les transitions enter/leave. Cependant, pour des raisons de compatibilité ascendante, le nom v-enter n'a pas été modifié :
.v-enter,
.v-leave-to {
opacity: 0;
}
.v-leave,
.v-enter-to {
opacity: 1;
}
2
3
4
5
6
7
8
9
Cela devenait confus, car enter et leave étaient larges et n'utilisaient pas la même convention de dénomination que leurs homologues de classe.
# Mise à jour 3.x
Afin d'être plus explicite et lisible, nous avons maintenant renommé ces classes d'état initial :
.v-enter-from,
.v-leave-to {
opacity: 0;
}
.v-leave-from,
.v-enter-to {
opacity: 1;
}
2
3
4
5
6
7
8
9
La différence entre ces deux états est maintenant beaucoup plus claire.
Les noms des accessoires liés au composant <transition> sont également modifiés :
leave-classest renommé enleave-from-class(peut être écrit commeleaveFromClassdans les fonctions de rendu ou JSX)enter-classest renommé enenter-from-class(peut être écritenterFromClassdans les fonctions de rendu ou en JSX).
# Stratégie de migration
- Remplacer les instances de
.v-enter' par.v-enter-from'. - Remplacer les instances de
.v-leavepar.v-leave-from. - Remplacer les instances des noms de prop connexes, comme ci-dessus.