Le système de transition de Vue.js vous permet d'appliquer automatiquement les effets de transition lorsque les éléments sont insérés ou supprimés du DOM. Vue.js déclenchera les transitions ou les animations CSS pour vous au bon moment, et vous pouvez également fournir la fonction de crochet JavaScript correspondant pour effectuer des opérations DOM personnalisées pendant le processus de transition.
Afin d'appliquer l'effet de transition, vous devez utiliser la fonction de transition sur l'élément cible:
<div v-if = "show" transition = "my-transition"> </div>
La fonction de transition peut être utilisée avec les ressources suivantes:
• V-if
• V-spectacle
• V-FOR (tiré uniquement lors de l'insertion et de la suppression, en utilisant le plugin de la liste Vue-Animated)
• Composants dynamiques (voir composants pour l'introduction)
• Sur le nœud racine du composant, et déclenché par la méthode d'instance Vue Dom (comme Vm. $ APPENDTO (EL)).
Lors de l'insertion ou de la suppression d'un élément avec une transition, Vue sera:
1. Essayez de trouver l'objet JavaScript Transition Hook avec ID "My-Transition" - Inscrivez-vous avec l'option Vue.Transition (ID, Hooks) ou Transitions. Si elle est trouvée, le crochet correspondant sera appelé à différentes étapes de la transition.
2. Sniffez automatiquement l'élément cible pour les transitions ou les animations CSS, et ajoutez / supprimez le nom de classe CSS, le cas échéant.
3. Si le crochet JavaScript n'est pas trouvé et que la transition / animation CSS n'est pas détectée, l'opération DOM (INSERT / DELLETE) est exécutée immédiatement dans la trame suivante.
Transition CSS
Exemple
Une transition CSS typique est comme ceci:
<div v-if = "show" transition = "expand"> Bonjour </div>
Ensuite, ajoutez des règles CSS pour `.Expand-transition`,« .expand-enter »et« .expand-leave »:
/ * Requis * /. Extend-Transition {Transition: All .3S Ease; hauteur: 30px; rembourrage: 10px; Color d'arrière-plan: #eee; Overflow: Hidden;} / * .Expand-enter définit l'état de démarrage de l'entrée * // * .expand-leave définit l'état de départ final * /. rembourrage: 0 10px; Opacité: 0;}Vous pouvez obtenir différentes transitions sur le même élément grâce à la liaison dynamique:
<div v-if = "show": transition = "transitionname"> Bonjour </div>
new vue ({el: '...', data: {show: false, transitionname: 'fade'}})De plus, des crochets JavaScript peuvent être fournis:
Vue.transition ('expand', {avant enquête: fonction (el) {el.textContent = 'avant enter'}, enter: function (el) {el.textContent = 'after'}, aprèsrent: function (el) {el.textContent = 'afterEntter'}, enfère: fonction (el) {// handle canellation} el.TextContent = 'Beforeave'}, Leave: fonction (el) {el.textContent = 'Leave'}, AfterLeave: function (el) {el.textContent = 'AfterLeave'}, LeavecCecelled: fonction (el) {// Gire Cancellation}})Nom de la classe de transition CSS
L'ajout et la commutation des noms de classe dépendent de la valeur de l'attribut de transition. Par exemple, transition = "fade", il y aura trois noms de classe CSS:
1..fade-transition est toujours conservé sur l'élément.
2..fade-enter définit l'état débutant de la transition. Appliquez une seule trame et supprimez-la immédiatement.
3..fade-leave définit l'état final de quitter la transition. En vigueur au début de la transition de départ et supprime après sa fin.
Si l'attribut de transition n'a aucune valeur, les noms de classe sont .v-transition, .v-enter et .v-leave par défaut.
Nom de la classe de transition personnalisée
1.0.14 Nouveau
Nous pouvons déclarer un nom de classe de transition CSS personnalisé dans une définition JavaScript de transition. Ces noms de classe personnalisés remplacent les noms de classe par défaut. Il peut être très utile lorsque vous devez coopérer avec des bibliothèques d'animation CSS tierces telles que Animate.css:
<div v-show = "ok" transition = "bounce"> regarde-moi rebond </div>
Vue.transition ('Bounce', {enternerclass: 'Bounceinleft', Leaveclass: 'Bouncenutright'})Déclarer explicitement le type de transition CSS
1.0.14 Nouveau
Vue.js doit ajouter un écouteur d'événements à l'élément de transition pour écouter à la fin de la transition. Sur la base du CSS utilisé, l'événement est soit un transitionend ou un AnimationEnd. Si vous n'utilisez que l'un des deux, Vue.js pourra déduire automatiquement le type d'événement correspondant en fonction des règles CSS efficaces. Cependant, dans certains cas, un élément peut avoir besoin d'avoir deux types d'animations en même temps. Par exemple, vous pouvez vouloir que Vue déclenche une animation CSS et l'élément a un effet de transition CSS lorsque la souris est suspendue. Dans ce cas, vous devez déclarer explicitement le type d'animation (animation ou transition) que vous voulez que Vue gère:
Vue.transition ('Bounce', {// Cet effet de transition n'écoutera que le type d'événement `AnimationEnd`: 'Animation'})Explication détaillée du processus de transition
Lorsque la propriété Show change, Vue.js insérera ou supprimera l'élément <v> en conséquence, modifiant le nom de la classe CSS de transition selon les règles suivantes:
• Si le spectacle devient faux, Vue.js sera:
1. Appelez le crochet de Beforeave;
2. Ajoutez le nom de classe V-Leave à l'élément pour déclencher la transition;
3. Appelez le crochet de congé;
4. Attendez la fin de la transition (écoutez l'événement TransitionEnd);
5. Supprimer les éléments du DOM et supprimer le nom de classe V-Leave;
6. Appelez le crochet après le lien.
• Si le spectacle devient vrai, Vue.js sera:
1. Appelez le crochet avant-poste;
2. Ajoutez le nom de classe V-enter à l'élément;
3. Insérez-le dans le DOM;
4. Appelez le crochet Entrée;
5. Force la disposition CSS une fois pour rendre la V-enter efficace. Supprimez ensuite le nom de classe V-enter pour déclencher la transition et revenez à l'état d'origine de l'élément;
6. Attendez que la transition se termine;
7. Appelez le crochet Afterenter.
De plus, si un élément est supprimé pendant que sa transition d'entrée est toujours en cours, le crochet entéral est appelé pour nettoyer les modifications ou entrer des minuteries créées. Il en va de même pour quitter la transition à son tour.
Lorsque toutes les fonctions de crochet ci-dessus sont appelées, elles pointent vers l'instance Vue à laquelle ils appartiennent. Règles de compilation: dans quel contexte la transition est compilée, c'est ce point au contexte.
Enfin, Entrée et Leave peuvent avoir un deuxième paramètre de rappel facultatif qui contrôle explicitement la fin de la transition. Par conséquent, il n'est pas nécessaire d'attendre l'événement CSS TransitionEnd, Vue.js attendra que vous appeliez ce rappel manuellement pour mettre fin à la transition. Par exemple:
Entrée: fonction (el) {// il n'y a pas de deuxième paramètre // L'événement CSS TransitionEnd détermine quand la transition se termine}contre.
ENTER: fonction (el, fait) {// il y a un deuxième paramètre // La transition se termine uniquement lorsque `Done` est appelé}<p> Lorsque plusieurs éléments se transforment ensemble, Vue.js ne sera pas le processus et ne forcera la mise en page qu'une seule fois.
Animation CSS
L'utilisation de l'animation CSS est en transition vers CSS. La différence est que dans l'animation, le nom de classe V-enter n'est pas supprimé immédiatement après l'insertion du nœud dans le DOM, mais est supprimé lorsque l'événement AnimationEnd est déclenché.
Exemple: (préfixe de compatibilité omis)
<span v-show = "show" transition = "bounce"> Regardez-moi! </span> .bounce-transition {display: en ligne de bloc; / * Sinon, l'animation d'échelle ne fonctionnera pas * /}. Bounce-enter {animation: rebond-in .5s;}. Bounce-leave {animation: rebond-out .5s;} @ clés de 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); }}Transition JavaScript
Vous pouvez également utiliser JavaScript Hooks sans définir de règles CSS. Lorsque vous utilisez JavaScript uniquement, les crochets Entrée et Leave doivent appeler le rappel DID, sinon ils seront appelés de manière synchrone et la transition se terminera immédiatement.
C'est une bonne idée de déclarer explicitement CSS: False pour les transitions JavaScript, et Vue.js sautera la détection CSS. Cela empêchera également les règles du CSS d'interférer avec la transition par inadvertance.
Dans l'exemple suivant, nous utilisons jQuery pour enregistrer une transition JavaScript personnalisée:
Vue.transition ('fade', {css: false, enter: function (el, fait) {// L'élément a été inséré dans le dom // appelé après l'animation $ (el) .css ('Opacity', 0) .animate ({Opacité: 1}, 1000, Done)}, ennectCarded: function (el) {$ (el) .stop ().). GensEnsuite, utilisez la fonction de transition:
<p transition = "fade"> </p>
Transition asymptotique
Les transitions peuvent être utilisées avec V-FOR pour créer une transition asymptotique. Ajoutez une fonctionnalité Stagger, entrez-étonnant ou décalagez-vous à l'élément de transition:
<div v-for = "item in list" transition = "stagger" stagger = "100"> </div>
Alternativement, offrez un échec de crochet, entrez-étonnant ou laissez-vous-étalant pour un meilleur contrôle:
Vue.transition ('Stagger', {stunger: function (index) {// Chaque élément de transition ajoute 50 ms de retard // mais la limite de retard maximale est de 300 ms de retour math.min (300, index * 50)}})Cet article a été compilé dans le tutoriel d'apprentissage des composants frontaux "Vue.js", et tout le monde est le bienvenu pour apprendre et lire.
Pour les tutoriels sur les composants Vue.js, veuillez cliquer sur le tutoriel d'apprentissage de la composante Vue.js spéciale pour apprendre.
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.