Dieser Artikel ist eine umfassendere und detailliertere Erklärung, die vom Herausgeber in Kombination mit offiziellen Dokumenten mit immer vollständigeren Codes zusammengestellt wurde.
Dieser Artikel stammt aus dem offiziellen Dokument:
http://cn.vuejs.org/guide/transitions.html
Schauen wir uns das relevante Kenntnis der Übergangsanimation an:
① Definition der Übergangsanimation;
Einfach ausgedrückt, es ist, welche Form es verschwindet und erscheint, wenn das Modul verschwindet und erscheint.
Wenn Sie die Übergangsanimation verwenden möchten, fügen Sie dem Tag Attribute hinzu:
Transition = "Übergangsanimationsname"
Zum Beispiel:
<div v-if = "box_1" transition = "mytran"> 1 </div>
Hier ist MyTran, der der Name der Übergangsanimation ist. Es ist ein Klassenname. Die Animation fügt mehrere unterschiedliche Erweiterungen basierend auf diesem Namen hinzu (siehe unten für Details)
② Übergangsanimation Bindungsereignisse:
【1】 V-IB
【2】 V-Show
【3】 v-für (nur beim Einfügen und Löschen ausgelöst, können Sie es selbst schreiben oder das Plug-In der Vue-Animated-Liste verwenden);
Schreiben Sie für sich selbst für sich:
<div v-for = "i in Elementen" transition = "mytran"> {{i}} </div>Eine kurze Methode zum Schreiben von Animationen (siehe unten)
【4】 Dynamische Komponenten;
[5] auf dem Stammknoten der Komponente und wird durch die VUE -Instanz -DOM -Methode ausgelöst (z. B.: vm. $ Appendto (EL)). Fügen Sie wahrscheinlich die Komponente zu einem Stammknoten hinzu.
③CSS -Animation:
[1] Zuerst müssen Sie das Übergangsattribut haben und dann seinen Wert erhalten.
【2】 Zweitens gibt es drei Klassennamen in CSS mit Werten, nämlich:
Unter der Annahme, dass der Wert des Übergangs MyTran ist, ist der Klassenname
veranschaulichen
.Mytran-Übergang
Im Animationszustand wird hier das Übergangsattribut von CSS platziert, und die Klasse, die sie repräsentiert, wird immer auf dem DOM existieren.
Darüber hinaus wird der Stil hier den Stil überschreiben, der durch die Standardklasse des Etiketts bereitgestellt wird
.Mytran-Enter
Bei der Eingabe erweitert sich die Komponente von diesem CSS -Zustand in den aktuellen CSS -Status, und diese Klasse hat nur den ersten Rahmen.
.Mytran-Leave
Beim Verlassen stellt die Komponente aus dem ursprünglichen CSS -Zustand in diesem Zustand wieder her. Diese Klasse wirkt sich vom Beginn des Ausstiegs in Kraft und wird am Ende des Ausstiegs gelöscht.
Als Code:
<Styles> .box {width: 100px; Höhe: 100px; Grenze: 1px solide Rot; Anzeige: Inline-Block; } /* Dies definiert die Animationssituation und den Stil, wenn er existiert. Dieser Stil überschreibt den Stil in der Klasse*/ .Mytran-Übergang {Übergang: Alle 0,3s Leichtigkeit; Hintergrundfarbe: Greenyellow; } /* .Mytran-Enter definiert den Startzustand* / /* .Mytran-Leave definiert den Endzustand der Abreise* / .Mytran-Enter, .Mytran-Leave {Höhe: 0; Breite: 0; } </style> <div id = "app"> <button @click = "ändern"> klicken, um zu verbergen und zufällig zu sehen. <script> var vm = new Vue({ el: '#app', data: { box_1: true, box_2: true, box_3: true }, methods: { change: function () { for (var i = 1; i < 4; i++) { this['box_' + i] = Math.random() > 0.5 ? true : false; } } } }) setInterval(vm.change, 300); </script>Durch das Klicken wird zufällig 3 Blöcke ausblenden oder Anzeigen.
④javaScript Hook:
[1] Einfach ausgedrückt, dies wirkt sich nicht auf die CSS -Animation aus (ändert sich in diesen drei Kategorien immer noch).
[2] Dies wird hauptsächlich verwendet, um den Eintritt und die Abreise von jeweils vier Momenten abzuwenden und bestimmte Dinge zu tun.
【3】 Diese acht Momente sind:
EINGABE: Vorher (vor der Eingabe), geben Sie ein (bevor Sie die Animation eingeben), nach der Eingabe (bevor Sie die Animation beenden), Entercancelled (bevor die Eingabe unterbrochen wird);
Beenden: BeReLeave (vor dem Ausgang), verlassen Sie (die Ausgangsanimation gerade begonnen), Afterleave (die Ausgangsanimation endete), Leavescancelled (der Ausgang wird unterbrochen);
[4] Die Modifikation von DOM wird in einigen Fällen wiederhergestellt. Wenn Sie beispielsweise die textbezogene Eigenschaft von DOM im Urlaubsschritt ändern, wird der ursprüngliche Zustand wiederhergestellt, wenn der DOM wieder eintritt. Wenn es jedoch im Eingabetschritt geändert wird, wird dies nicht wiederhergestellt.
Als Code:
Vue.transition ('MyTran', {voraber: function (el) {// vor der Eingabe von Console.log ("Animationsstartzeit eingeben:" + new Date (). }, BeeLeave: Funktion (el) {console.log ("Endzeit eingeben:" + neuer Datum ().⑤Scham Übergangsklassenname:
Der Grund für das Anpassen des Namens der Übergangsklassen ist, dass wir nicht verlangen können, dass der Stil jeder CSS -Animation nach der VueJS -Standard -Schreibmethode geschrieben wird (z. B. von anderen herunterladen Code).
HINWEIS: Die Definition muss vor dem Deklar der relevanten VUE -Instanz vorgenommen werden.
Zunächst empfehle ich eine Sammlung von Animationen, die vom offiziellen VueJS -Tutorial empfohlen wurden: (Dies ist kein Download -Link, Sie müssen ihn öffnen, um den Download -Link zu finden, bevor Sie ihn herunterladen können.
https://danden.github.io/animate.css/
Importieren Sie nach dem Herunterladen diese CSS -Datei und stimmen Sie die Animation an.
<div id = "app"> <button @klick = "ändern"> klicken, um auszublenden und zufällig zu zeigen. '#App', Daten: {Box: true}, Methoden: {ändern: function () {this.box =! this.box;}}}); </script>erklären:
【1】 Animal -Tags müssen die animierte Klasse haben;
【2】 Enterclass und Leaveclass entsprechen der vorherigen XXX-Einheit und XXX-LEEVE;
【3】 Der Effekt besteht darin, von links einzublitzen und von rechts auszublitzen.
[4] Sie müssen eine Animation festlegen, bevor Sie die VUE -Instanz deklarieren, andernfalls ist sie ungültig.
⑥use Animationen
In VueJs sind Animationsanimation und Übergangsanimation unterschiedlich.
Einfach ausgedrückt, die Übergangsanimation ist in drei Schritte unterteilt: Permanentklasse, beim Eingeben ausgelöste Klasse und beim Beenden ausgelöst; Nur dauerhafte Klasse hat Übergangsanimationsattribute, und die beiden anderen Schritte haben nur einen CSS -Zustand.
Die Animationsanimation ist in zwei Schritte unterteilt: Die Klasse wird beim Eingeben und die Klasse beim Verlassen ausgelöst. Natürlich existiert die XXX-Übergangsklasse im DOM (in dieser Klasse kann der Animationsursprung festgelegt werden oder diese Klasse einfach nicht festlegen).
In der Animation sollten die Klassenklassen beim Ein- und Ausgangsklassen beispielsweise Animationseffekte haben:
@keyframes fat {0% {width: 100px} 50% {width: 200px} 100% {width: 100px}} .fat-leave,. }Beim Eingeben und Verlassen sind die ausgeführten Klassennamen die gleichen wie Übergänge und befinden sich in Formaten von XXX-Leave und XXX-Einentwälte.
Natürlich können Sie auch den Klassennamen anpassen.
Beispielcode:
<Styles> .box {width: 100px; Höhe: 100px; Grenze: 1px solide Rot; Anzeige: Inline-Block; } @keyframes fat {0% {width: 100px} 50% {width: 200px} 100% {width: 100px}} .fat-leave, .fat-Inner {Animation: Fat 1s beide; } </style> <div id="app"> <button @click="change"> Click to hide and display randomly</button> <br/> <div v-if="box" transition="fat">1</div> </div> <script> var vm = new Vue({ el: '#app', data: { box: true }, methods: { change: function () { this.box = !this.box; } } }); </script>Wirkung:
Verschwinden: Seien Sie zuerst breiter, erholen Sie sich dann und verschwinden;
Geben Sie ein: Erscheinen, erweitern, erholen, bleiben;
Hier bin ich faul und teile den gleichen Animationseffekt.
In diesem Zusammenhang gibt es da
[1] erklären den Animationstyp ausdrücklich (wenn die Animation gleichzeitig Übergang und Animation hat und einer von ihnen in verschiedenen Situationen ausgeführt wird);
[2] detaillierte Erläuterung des Übergangsprozesses (die Reihenfolge der Ausführung von JS -Hook und die CSS -Ausführung, wenn die Animation ausgelöst wird);
[3] CSS -Animation (dh Animation, wie oben geschrieben, in Details weggelassen);
[4] JavaScript -Übergang (kein JS -Haken, ein Haken bedeutet, dass eine bestimmte Funktion zu einem bestimmten Stadium aufgerufen wird, aber dieser Haken hat nichts mit Animation zu tun) und verwenden JavaScript, um die Animation zu steuern, wie z. B. die Animate -Methode von JQuery;
【5】 Ein allmählicher Übergang von V-for;
Da es vorerst nicht verfügbar ist, wird es weggelassen. Wenn Sie es anzeigen müssen, öffnen Sie bitte die Verbindung:
http://cn.vuejs.org/guide/transitions.html
Das obige ist eine umfassende Analyse des VueJS -Übergangsanimationsfalls des siebten VueJs, der Ihnen vom Herausgeber vorgestellt wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!