javascript - Effet de transition vue Ordre de transition CSS des noms de classe

Question

Concevez une transition pour un élément. L'effet idéal est que la hauteur augmente lorsqu'il apparaît et diminue lorsqu'il disparaît.
Le code conçu est le suivant :

.collapse-enter-active, 
.collapse-leave-active {
  transition: height .5s;
}
.collapse-enter, 
.collapse-leave-active {
  height: 0;
}
.collapse-leave {
  height: 100px;
} 
.collapse-enter-active {
  height: 100px;
}

Lorsque l'élément résultat apparaît, la hauteur atteint directement 100px, et lorsqu'il disparaît, c'est normal. L'ordre de modification du code est le suivant :

.collapse-enter-active, 
.collapse-leave-active {
  transition: height .5s;
}
.collapse-enter-active {
  height: 100px;
}
.collapse-enter, 
.collapse-leave-active {
  height: 0;
}
.collapse-leave {
  height: 100px;
}

Le problème est résolu. Je ne comprends pas pourquoi la commande a un impact. L'effet de transition n'est-il pas obtenu en changeant de css, n'est-ce pas ?
Vous pouvez cliquer pour afficher jsbin pour des effets spécifiques

Answer 1

La réponse de @CRIMX l'a clairement indiqué. Essentiellement, les deux classes enter et enter active existeront sur l'élément animé en même temps dans la première image, puis l'animation sera exécutée en supprimant la classe enter. Par conséquent, le style. de la classe active ne peut pas prendre effet par anticipation.

Bien que la méthode à deux classes soit suffisante pour terminer l'animation, elle n'est vraiment pas facile à comprendre, alors vue 2.1.8 a commencé à ajouter le nom de classe de to, qui peut séparer l'état final de l'animation de la classe active, ce qui facilite la compréhension et évite de générer des problèmes de couverture séquentielle.

Answer 2

Lorsque l'élément est inséré, v-enter et v-enter-active sont efficaces en même temps. Le premier est supprimé dans l'image suivante et le second est supprimé une fois l'animation terminée. Donc v-enter-active doit être écrit en premier. Il en va de même pour les congés.

Answer 3

C'est vraiment étrange. La prochaine fois que j'écrirai actif, je l'écrirai devant et j'attendrai que les experts l'expliquent

Answer 4

Vous pouvez consulter l'explication donnée sur le site officiel, qui est très détaillée : https://cn.vuejs.org/v2/guide/transitions.html#过渡的-CSS-类名