Durch das Übergangssystem von VUE.JS können Sie dem Prozess des Einsetzens/Entfernens von Dom -Knoten problemlos Übergangsanimationseffekte hinzufügen. Vue fügt zum entsprechenden Zeitpunkt die CSS -Klasse -Namen hinzu/entfernen Sie CSS3 -Übergangs-/Animationseffekte. Sie können auch die entsprechende JavaScript -Hook -Funktion bereitstellen, um benutzerdefinierte DOM -Operationen während des Übergangsprozesses auszuführen.
Nehmen Sie die Anweisung v-transition = "my my tresitation" als Beispiel: Wenn der DOM-Knoten mit dieser Anweisung eingefügt oder entfernt wird, wird VUE:
Verwenden Sie die MY-Übergang-ID, um herauszufinden, ob ein registriertes JavaScript-Hook-Objekt vorhanden ist. Dieses Objekt kann weltweit von VUE.Transition (ID, Hooks) registriert oder in der aktuellen Komponente über die Übergänge -Option definiert werden. Wenn dieses Objekt gefunden wird, wird der entsprechende Haken in verschiedenen Phasen der Übergangsanimation aufgerufen.
Erkennen Sie automatisch, ob das Zielelement CSS -Übergangseffekte oder Animationseffekte aufweist, und fügen Sie den CSS -Klasse -Namen zum entsprechenden Zeitpunkt hinzu.
Wenn die Funktion JavaScript Hook nicht bereitgestellt wird und der entsprechende CSS -Übergangs-/Animationseffekt nicht erkannt wird, wird die Insertion/Entfernung des DOM sofort im nächsten Frame durchgeführt.
Alle Vue.js -Übergangseffekte werden nur dann wirksam, wenn der DOM -Vorgang durch VUE.JS. Das Auslösen kann durch integrierte Anweisungen wie V-IF oder durch VUE-Instanzmethoden wie VM. $ AppendTo () erfolgen.
CSS -Übergangseffekt
Ein typischer CSS -Übergangseffekt wird wie folgt definiert:
<div v-if = "show" v-transition = "expon"> Hallo </div>
Sie müssen auch drei CSS-Klassen definieren: .expand-transition, .expand-Enter und .expand-Leave:
.expand-transition {Übergang: Alle .3s Leichtigkeit; Höhe: 30px; Polsterung: 10px; Hintergrundfarbe: #eee; Überlauf: versteckt;}. Expand-Enter, .expand-Leave {Höhe: 0; Polsterung: 0 10px; Opazität: 0;}Gleichzeitig können Sie auch JavaScript -Hooks bereitstellen:
Vue.transition('expand', { beforeEnter: function (el) { el.textContent = 'beforeEnter' }, enter: function (el) { el.textContent = 'enter' }, afterEnter: function (el) { el.textContent = 'afterEnter' }, enterCancelled: function (el) { // handle cancellation },` beforeLeave: function (el) {El.TextContent = 'BeforeLeave'}, Leave: Funktion (el) {El.TextContent = 'Leave'}, Afterleave: Funktion (el) {el.textContent = 'AfterLeave'}, LeaveCancelled: Funktion (el) {// Behandeln von Cancellation}}}}})}}})Ergebnis
Der hier verwendete CSS-Klassenname wird durch den Wert der V-Transpansition-Richtlinie bestimmt. Nehmen Sie als Beispiel V-Transition = "Fade", und die CSS-Klasse. Wenn die V-Transpansition-Direktive keinen Wert liefert, sind die verwendeten CSS-Klassennamen die Standard-.V-Übersetzung, .v-Enter und .V-Leave.
Wenn sich das Attribut anzeigen, fügt/entfernen Sie das <Div> -Element basierend auf seinem aktuellen Wert ein und fügen Sie die entsprechende CSS -Klasse zum entsprechenden Zeitpunkt hinzu, wie folgt:
Wenn die Show falsch wird, wird Vue:
1. Rufen Sie den BeeLeave -Haken an;
2. Anwenden Sie die CSS-Klasse. V-LEEVE auf das Element, um den Übergangseffekt auszulösen.
3. Rufen Sie den Urlaubshaken an;
4. Warten Sie, bis der Übergangseffekt ausgeführt wird. (Hören Sie sich das Übergangsereignis an)
5. Elemente aus dem DOM entfernen und die CSS-Klasse .V-Leave entfernen.
6. Rufen Sie den Afterleave -Haken an.
Wenn die Show wahr ist, wird Vue:
1. Rufen Sie den voreinerhaltenden Haken an;
2. Wenden Sie die CSS-Klasse an.
3. Einfügen das Element in das DOM;
V.
5. Wenden Sie die .V-Einheit-Klasse an und erzwingen Sie dann das CSS-Layout, um sicherzustellen, dass .V-Enter wirksam wird; Entfernen Sie schließlich .V-Besitz, um das Element zum Übergang in seinen ursprünglichen Zustand auszulösen.
6. Warten Sie, bis der Übergangseffekt ausgeführt wird;
7. Rufen Sie den After -Enter -Haken an.
Wenn ein Element, das einen eingehenden Übergangseffekt ausführt, vor Abschluss des Übergangs entfernt wird, wird der Entercancelled Hook ausgeführt. Dieser Haken kann zum Reinigen von Arbeiten verwendet werden, z. B. das Entfernen von Timern, die bei der Eingabetaste erstellt wurden. Gleiches gilt für Elemente, die während des Übergangs wieder eingepasst werden.
Wenn alle oben genannten Hakenfunktionen ausgeführt werden, weist dies auf die entsprechende VUE -Instanz hin. Wenn ein Element selbst der Stammknoten einer VUE -Instanz ist, wird die Instanz so angewendet. Andernfalls weist dies auf die Instanz hin, zu der der Übergangsanweis angehört.
Schließlich kann die Eingabet- und Leave -Hakenfunktionen einen optionalen zweiten Parameter akzeptieren: eine Rückruffunktion. Wenn Ihre Funktionssignatur einen zweiten Parameter enthält, werden Sie erwarten, dass Sie diesen Rückruf verwenden, um den gesamten Übergangsprozess explizit abzuschließen, anstatt sich auf VUE zu verlassen, um die Übergangsereignisse von CSS -Übergängen automatisch zu erkennen. Zum Beispiel:
Geben Sie: Funktion (el) {// kein zweiter Parameter // Das Ende des Übergangseffekts durch das CSS -Übergangsende Ereignis} bestimmt}Vs
Geben Sie: Funktion (EL, Done) {// Es gibt einen zweiten Parameter // Das Ende des Übergangseffekts muss durch manuelles Aufrufen von `Done`} bestimmt werdenWenn mehrere Elemente gleichzeitig Übergangseffekte ausführen, wird Vue.js verarbeitet, um sicherzustellen, dass das erzwungene Layout nur einmal ausgelöst wird.
CSS -Animation
CSS -Animationen werden auf die gleiche Weise wie der CSS -Übergangseffekt aufgerufen. Der Unterschied besteht darin, dass in der Animation die .V-Ein-Einheit-Klasse nicht unmittelbar nach dem Einfügen des Knotens in das DOM entfernt wird, sondern beim Auslösen des Animationend-Ereignisses entfernt wird.
Beispiel: (Kompatibilitätspräfix weggelassen)
<span v-show = "show" v-transition = "bounce"> schau mich an! </span>
.Bounce-Inner {Animation: Bounce-in .5s;}. Bounce-Leave {Animation: Bounce-out .5s;}@keyframes bounce-in {0% {transform: scale (0); } 50% {Transformation: Skala (1,5); } 100% {Transformation: Skala (1); }}@keyFrames Bounce-out {0% {Transform: Skala (1); } 50% {Transformation: Skala (1,5); } 100% {Transformation: Skala (0); }}Ergebnis
Reine JavaScript -Übergangseffekte
Sie können auch JavaScript -Hooks verwenden, ohne CSS -Übergangsregeln zu definieren. Wenn Sie nur JavaScript -Hooks verwenden, müssen die Eingabet- und Abschlusshaken den abgeschlossenen Rückruf verwenden. Andernfalls werden sie synchron bezeichnet und der Übergang endet sofort. Im folgenden Beispiel verwenden wir JQuery, um einen benutzerdefinierten JavaScript -Übergangseffekt zu registrieren:
VUE.TRANSITION ('FADE', {ENTER: Funktion (El, Done) {// Das Element wurde zu diesem Zeitpunkt in die DOM eingefügt // Aufrufen, wenn die Animation abgeschlossen ist. {// Ähnlich dem Eingaberosen $ (el) .animate ({Opazität: 0}, 1000, fertig)}, LeaVecancelled: Funktion (el) {$ (el) .stop ()}})Nachdem Sie diesen Übergang definiert haben, können Sie ihn aufrufen, indem Sie die entsprechende ID für die V-Überführung angeben:
<p v-transition = "fade"> </p>
Wenn ein Element, das nur JavaScript -Übergangseffekte verwendet, durch andere CSS -Übergangs-/Animationsregeln beeinflusst wird, kann dies den CSS -Übergangserkennungsmechanismus von Vues beeinträchtigen. Bei der Begegnung dieser Situation können Sie die CSS -Erkennung durch Hinzufügen von CSS: Falsch zu Ihrem Hakenobjekt verbieten.
Allmählich Übergangseffekt
Wenn wir sowohl V-Transition als auch V-Repeat verwenden, können wir dem Listenelement einen progressiven Übergangseffekt hinzufügen. Sie müssen nur Stagger-, Enter-Stagger- oder Leave-Stagger-Funktionen (in Millisekunden) hinzufügen:
<div v-repeat = "list" v-transition stagger = "100"> </div>
Oder Sie können auch Stagger-, Enterstagger- oder Eavestagger -Hooks für eine feinere granulare Kontrolle bereitstellen:
VUE.TRANSITION ('Stagger', {Stagger: Funktion (Index) {// jedem Übergangselement 50 ms Verzögerung hinzufügen, aber die maximale Verzögerung beträgt 300 ms math.min (300, Index * 50)}}})Beispiel:
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.