Cet article est une explication plus complète et détaillée compilée par l'éditeur en combinaison avec des documents officiels, avec des codes de plus en plus complets.
Cet article vient du document officiel:
http://cn.vuejs.org/guide/transition.html
Jetons un coup d'œil aux connaissances pertinentes de l'animation de transition:
① Définition de l'animation de transition;
Autrement dit, c'est quelle forme il disparaîtra et apparaîtra lorsque le module disparaît et apparaît;
Si vous souhaitez utiliser une animation de transition, ajoutez des attributs à la balise:
transition = "Nom d'animation de transition"
Par exemple:
<div v-if = "box_1" transition = "mytran"> 1 </div>
Voici MyTran, qui est le nom d'animation de transition. C'est un nom de classe. L'animation ajoutera plusieurs extensions différentes en fonction de ce nom (voir ci-dessous pour plus de détails)
② Événements de liaison d'animation de transition:
【1】 V-if
【2】 V-spectacle
【3】 V-FOR (déclenché uniquement lors de l'insertion et de la suppression, vous pouvez l'écrire vous-même ou utiliser le plug-in de liste Vue-Animated);
Écrivez par vous-même par exemple:
<div v-for = "i in items" transition = "mytran"> {{i}} </div>Une brève méthode d'écriture d'animation (voir ci-dessous)
【4】 Composants dynamiques;
[5] sur le nœud racine du composant, et est déclenché par la méthode d'instance Vue Dom (par exemple: vm. $ Appendto (el)). Probablement, ajoutez le composant à un nœud racine.
③CSS Animation:
[1] Tout d'abord, vous devez avoir l'attribut de transition puis obtenir sa valeur;
【2】 Deuxièmement, il y a trois noms de classe dans CSS avec des valeurs, à savoir:
En supposant que la valeur de la transition est MyTran, le nom de la classe est
illustrer
.Mytran-transition
Dans l'état d'animation, l'attribut de transition de CSS est placé ici, et la classe qu'il représente existera toujours sur le DOM;
De plus, le style ici remplacera le style fourni par la classe par défaut de l'étiquette
.Mytran-enter
Lors de l'entrée, le composant se développe de cet état CSS à l'état CSS actuel, et cette classe n'a que la première trame.
.Mytran-leave
Lors de la sortie, le composant restaure cet état à partir de l'état CSS d'origine. Cette classe prend effet dès le début de la sortie et est supprimée à la fin de la sortie.
Comme code:
<style> .box {width: 100px; hauteur: 100px; Border: 1px rouge solide; Affichage: bloc en ligne; } / * Cela définit la situation d'animation et le style quand il existe. Ce style remplacera le style dans la classe * / .mytran-transition {transition: toutes les 0.3s facilite; Color d'arrière-plan: Greenyellow; } / * .mytran-enter définit l'état de début de l'entrée * / / * .mytran-leave définit l'état de départ final * / .mytran-enter, .mytran-leave {height: 0; Largeur: 0; } </ style> <div id = "app"> <bouton @ click = "modifier"> cliquez pour masquer et afficher au hasard </futton> <br/> <div v-if = "box_1" transition = "mytran"> 1 </v> <div v-if = "box_2" transition = "mytran"> 2 </v> <div V-if = "box_3" transition "transition =" myTran "> 3 <cript> var vm = new Vue ({el: '#App', data: {box_1: true, box_2: true, box_3: true}, méthodes: {change: function () {for (var i = 1; i <4; i ++) {this ['box_' + i] = math.random ()> 0.5? 300); </cript>Le clic fera au hasard 3 blocs masquer ou afficher;
④JavaScript Hook:
[1] En termes simples, cela n'affecte pas l'animation CSS (toujours les changements dans ces trois catégories);
[2] Ceci est principalement utilisé pour saisir l'entrée et le départ de quatre moments chacun, et est utilisé pour faire certaines choses;
【3】 Ces huit moments sont:
ENTER: AVANT (avant Entrée), Entrez (avant d'entrer, l'animation ne commence que), après-entrée (avant d'entrer l'animation se termine), EntercercElled (avant l'entrée n'est interrompue);
Exit: befreforeave (avant la sortie), LELT (l'animation de sortie vient de commencer), après le fil (l'animation de sortie s'est terminée), LeavecCecelled (la sortie est interrompue);
[4] La modification de DOM sera restaurée dans certains cas. Par exemple, la modification de la propriété TextContent de DOM dans l'étape de congé restaurera l'état d'origine lorsque le DOM arrivera; Mais s'il est modifié dans l'étape Entrée, il ne sera pas restauré.
Comme code:
Vue.transition ('mytran', {beforeEnt: function (el) {// avant d'entrer console.log ("Entrer l'heure de début de l'animation:" + new Date (). GetTime ());}, ENTER: function (el) {el.textContent = new Date ();}, Afterenter: function (el) {console.log ("Entrée Entre Time:" + New Date ().). BeforeLeave: fonction (el) {Console.log (LETT ANIMENTS TEMPS: "+ Nouveau Date (). GetTime ();⑤ Nom de la classe de transition personnalisée:
La raison de la personnalisation du nom de la classe de transition est que nous ne pouvons pas exiger que le style de chaque animation CSS soit écrit en fonction de la méthode d'écriture standard VUEJS (comme nous téléchargeons le code écrit par d'autres);
Remarque: la définition doit être effectuée avant de déclarer l'instance Vue pertinente.
Tout d'abord, je recommande une collection d'animations recommandées par le tutoriel officiel Vuejs: (ce n'est pas un lien de téléchargement, vous devez l'ouvrir pour trouver le lien de téléchargement avant de pouvoir le télécharger)
https://daneden.github.io/animate.css/
Après téléchargement, importez ce fichier CSS et commencez à personnaliser l'animation;
<div id = "app"> <bouton @ click = "modifier"> Cliquez sur pour masquer et afficher au hasard </futton> <br/> <div v-if = "box" transition = "bounce"> 1 </div> </div> <cript> vue.transition ("Bounce", {enterclass: 'Bounceinleft', Leaveclass: 'Bounce '#App', data: {box: true}, méthodes: {change: function () {this.box =! this.box;}}}); </cript>expliquer:
【1】 Les étiquettes animales sont nécessaires pour avoir la classe animée;
【2】 La classe et le leaveclasse sont équivalents à la précédente xxx-enter et xxx-leave;
【3】 L'effet est de flasher depuis la gauche et de clignoter de la droite.
[4] Vous devez définir une animation avant de déclarer l'instance Vue, sinon elle sera invalide;
Utilisez des animations
Dans Vuejs, l'animation d'animation et l'animation de transition sont différentes.
Autrement dit, l'animation de transition est divisée en trois étapes: classe permanente, classe déclenchée lors de l'entrée et la classe déclenchée à la sortie; Seule la classe permanente a des attributs d'animation de transition, et les deux autres étapes ont uniquement un état CSS;
Animation L'animation est divisée en deux étapes: la classe s'est déclenchée lors de l'entrée et la classe s'est déclenchée à la sortie. Bien sûr, la classe XXX-Transition existe dans le DOM (cette classe peut être utilisée pour définir l'origine de l'animation, ou tout simplement ne pas définir cette classe);
Dans l'animation d'animation, les classes de classe lors de l'entrée et de la sortie doivent avoir des effets d'animation, par exemple:
@KeyFrames Fat {0% {Width: 100px} 50% {width: 200px} 100% {width: 100px}} .fat-leave, .fat-enter {animation: fat 1s les deux; }Lors de la saisie et de la sortie, les noms de classe exécutés sont les mêmes que les transitions et sont dans les formats de xxx-leave et xxx-enter;
Bien sûr, vous pouvez également personnaliser le nom de classe.
Exemple de code:
<style> .box {width: 100px; hauteur: 100px; Border: 1px rouge solide; Affichage: bloc en ligne; } @KeyFrames Fat {0% {Width: 100px} 50% {width: 200px} 100% {width: 100px}} .fat-leave, .fat-enter {animation: fat 1s les deux; } </ style> <div id = "app"> <bouton @ click = "modifier"> cliquez pour masquer et afficher aléatoirement </ bouton> <br/> <div v-if = "box" transition = "fat"> 1 </div> </div> <script> var vm = new Vue ({el: '#App', data: {box: true}, méthodes: {modifier: fonction (fonction () {this. = that.},; }); </cript>Effet:
Disparaître: soyez plus large, puis récupérez, puis disparaissez;
Entrez: apparaître, élargir, récupérer, rester;
Ici, je suis paresseux et je partage le même effet d'animation.
En plus de cela, il y a
[1] déclarent explicitement le type d'animation (si l'animation a la transition et l'animation en même temps, et l'une d'entre elles sera exécutée dans différentes situations);
[2] Explication détaillée du processus de transition (l'ordre de l'exécution de JS Hook et l'exécution CSS lorsque l'animation est déclenchée);
[3] Animation CSS (c'est-à-dire l'animation, comme écrit ci-dessus, omis dans les détails);
[4] Transition JavaScript (pas un crochet JS, un crochet signifie qu'une certaine fonction sera appelée à une certaine étape, mais ce crochet n'a rien à voir avec l'animation), et utiliser JavaScript pour contrôler l'animation, comme la méthode d'animation de JQuery;
【5】 Une transition progressive utilisée par V-FOR;
Comme il n'est pas disponible pour le moment, il est omis. Si vous devez le voir, veuillez ouvrir la connexion:
http://cn.vuejs.org/guide/transition.html
Ce qui précède est une analyse complète du cas d'animation de transition Vuejs du septième Vuejs présenté par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!