Grâce au système de transition de Vue.js, vous pouvez facilement ajouter des effets d'animation de transition au processus d'insertion / supprimer les nœuds DOM. Vue ajoutera / supprimera les noms de classe CSS au moment approprié pour déclencher des effets de transition / animation CSS3. Vous pouvez également fournir la fonction de crochet JavaScript correspondant pour effectuer des opérations DOM personnalisées pendant le processus de transition.
Prenant l'instruction V-Transition = "My-Transition" comme exemple, lorsque le nœud DOM avec cette instruction est inséré ou supprimé, Vue sera:
Utilisez l'ID My-Transition pour savoir s'il existe un objet Hook JavaScript enregistré. Cet objet peut être enregistré à l'échelle mondiale par Vue.Transition (ID, Hooks) ou défini à l'intérieur du composant actuel via l'option Transitions. Si cet objet est trouvé, le crochet correspondant sera appelé à différentes étapes de l'animation de transition.
Détecter automatiquement si l'élément cible a des effets de transition CSS ou des effets d'animation appliqués et ajouter / supprimer le nom de la classe CSS au moment approprié.
Si aucune fonction de crochet JavaScript n'est fournie et qu'aucun effet de transition / animation CSS correspondant n'est détecté, l'insertion / la suppression du DOM est effectuée immédiatement dans la trame suivante.
Tous les effets de transition Vue.js ne prendront effet que si l'opération DOM est déclenchée via Vue.js. Le déclenchement peut être effectué par des instructions intégrées, telles que V-IF, ou via des méthodes d'instance Vue, telles que VM. $ APPENDTO ().
Effet de transition CSS
Un effet de transition CSS typique est défini comme suit:
<div v-if = "show" v-transition = "expand"> Bonjour </div>
Vous devez également définir trois classes CSS: .expand-transition, .expand-enter et .expand-leave:
.Expand-Transition {Transition: All .3S Ease; hauteur: 30px; rembourrage: 10px; Color d'arrière-plan: #eee; Overflow: Hidden;}. Expand-enter, .expand-leave {height: 0; rembourrage: 0 10px; Opacité: 0;}En même temps, vous pouvez également fournir des crochets JavaScript:
Vue.transition ('expand', {avant enquête: fonction (el) {el.textContent = 'avant enquête'}, enter: function (el) {el.textContent = 'Entrée'}, afterEnt: function (el) {el.textcontent = 'afterEnt gensrésultat
Le nom de classe CSS utilisé ici est déterminé par la valeur de la directive V-Transition. Prenant V-Transition = "Fade" à titre d'exemple, la classe CSS .fade-transition existera toujours, et .fade-enter et .fade-leave seront automatiquement ajoutés ou supprimés au bon moment. Lorsque la directive V-Transition ne fournit pas de valeur, les noms de classe CSS utilisés seront les .v-transition par défaut, .v-enter et .v-leave.
Lorsque l'attribut Show change, Vue insérera / supprimera l'élément <v> en fonction de sa valeur actuelle et ajoutera / supprimera la classe CSS correspondante au moment approprié, comme suit:
Lorsque le spectacle devient faux, Vue sera:
1. Appelez le crochet de Beforeave;
2. Appliquez la classe CSS .V-Leave sur l'élément pour déclencher l'effet de transition;
3. Appelez le crochet de congé;
4. attendre l'exécution de l'effet de transition; (Écoutez l'événement TransitionEnd)
5. Retirez les éléments du DOM et supprimez la classe CSS .V-leave.
6. Appelez le crochet après le lien.
Lorsque le spectacle est vrai, Vue sera:
1. Appelez le crochet avant-poste;
2. Appliquer la classe CSS.v-enter sur l'élément;
3. Insérez l'élément dans le DOM;
4. Appelez le crochet Entrée;
5. Appliquer la classe .v-enter, puis forcer la disposition CSS pour garantir que .v-enter prend effet; Enfin, supprimez .v-enter pour déclencher l'élément pour passer à son état d'origine.
6. attendre l'exécution de l'effet de transition;
7. Appelez le crochet Afterenter.
De plus, si un élément qui exécute un effet de transition entrant est supprimé avant la fin de la transition, le crochet entéral sera exécuté. Ce crochet peut être utilisé pour le nettoyage des travaux, tels que la suppression des minuteries créées à ENTER. Il en va de même pour les éléments réinsérés pendant la transition.
Lorsque toutes les fonctions de crochet ci-dessus sont exécutées, cela pointe vers l'instance Vue correspondante. Si un élément lui-même est le nœud racine d'une instance Vue, cette instance sera appliquée comme celle-ci; Sinon, cela pointe vers l'instance à laquelle appartient l'instruction de transition.
Enfin, les fonctions Entrée et Leave Hook peuvent accepter un deuxième paramètre facultatif: une fonction de rappel. Lorsque votre signature de fonction contient un deuxième paramètre, cela signifie que vous vous attendez à utiliser ce rappel pour terminer explicitement l'ensemble du processus de transition, plutôt que de compter sur Vue pour détecter automatiquement les événements transitionnaux des transitions CSS. Par exemple:
Entrée: fonction (el) {// pas de deuxième paramètre // La fin de l'effet de transition est déterminée par l'événement de fin de transition CSS}CONTRE
Entrée: fonction (el, fait) {// il y a un deuxième paramètre // La fin de l'effet de transition doit être déterminée en appelant manuellement `Done`}Lorsque plusieurs éléments effectuent des effets de transition en même temps, Vue.js ne sera pas le processus pour garantir que la disposition forcée n'est déclenchée qu'une seule fois.
Animation CSS
Les animations CSS sont appelées de la même manière que l'effet de transition CSS. La différence est que dans l'animation, la classe .v-enter n'est pas supprimée immédiatement après l'insertion du nœud dans le DOM, mais est supprimée lorsque l'événement AnimationEnd est déclenché.
Exemple: (préfixe de compatibilité omis)
<span v-show = "show" v-transition = "Bounce"> Regardez-moi! </span>
.bounce-enter {Animation: rebond-in .5s;}. Bounce-leave {animation: rebond-out .5s;} @ clés Bounce-in {0% {transform: scale (0); } 50% {transform: échelle (1.5); } 100% {transform: échelle (1); }} @ Keyframes Bounce-out {0% {transform: échelle (1); } 50% {transform: échelle (1.5); } 100% {transform: échelle (0); }}résultat
Effets de transition JavaScript purs
Vous pouvez également utiliser JavaScript Hooks sans définir de règles de transition CSS. Lorsque vous utilisez uniquement des crochets JavaScript, les crochets ENTER and Leave doivent utiliser le rappel DID, sinon ils seront appelés de manière synchrone et la transition se terminera immédiatement. Dans l'exemple suivant, nous utilisons jQuery pour enregistrer un effet de transition JavaScript personnalisé:
Vue.transition ('fade', {Entrée: fonction (el, fait) {// L'élément a été inséré dans le dom à ce moment // Appel fait lorsque l'animation est terminée $ (el) .css ('Opacity', 0) .Animate ({OPACITY: 1}, 1000, Done)}, ennectCarmed: function (el) {$ (el) .Stop.).). fait) {// similaire à l'entrée Hook $ (el) .animate ({opacity: 0}, 1000, fait)}, LeaveCancelled: function (el) {$ (el) .stop ()}})Après avoir défini cette transition, vous pouvez l'appeler en spécifiant l'ID correspondant à la transition en V:
<p v-transition = "fade"> </p>
Si un élément qui n'utilise que les effets de transition JavaScript se trouve être affecté par d'autres règles de transition / animation CSS, cela peut interférer avec le mécanisme de détection de transition CSS de Vue. Lorsque vous rencontrez cette situation, vous pouvez interdire la détection CSS en ajoutant CSS: Faux à votre objet Hook.
Effet de transition progressivement
Lorsque vous utilisez à la fois la transition en V et la répétition V, nous pouvons ajouter un effet de transition progressif à l'élément de liste. Il vous suffit d'ajouter des fonctionnalités de décalage, d'entrée ou de laisse-décalage (en millisecondes):
<div v-repeat = "list" v-transition stagger = "100"> </div>
Ou vous pouvez également fournir des crochets Stagger, Entagger ou Eavestagger pour un contrôle granulaire plus fin:
Vue.transition ('Stagger', {stunger: function (index) {// ajouter 50 ms délai à chaque élément de transition, // mais le retard maximum est 300 ms return math.min (300, index * 50)}})Exemple:
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.