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
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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.
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.
C'est vraiment étrange. La prochaine fois que j'écrirai actif, je l'écrirai devant et j'attendrai que les experts l'expliquent
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-类名