Mit dem Übergangssystem von VUE.JS können Sie Übergangseffekte automatisch anwenden, wenn Elemente aus dem DOM eingefügt oder entfernt werden. Vue.js löst CSS -Übergänge oder Animationen zum richtigen Zeitpunkt aus und Sie können auch die entsprechende JavaScript -Hook -Funktion bereitstellen, um benutzerdefinierte DOM -Operationen während des Übergangsprozesses auszuführen.
Um den Übergangseffekt anzuwenden, müssen Sie die Übergangsfunktion im Zielelement verwenden:
<div v-if = "show" transition = "my my-transition"> </div>
Die Übergangsfunktion kann mit den folgenden Ressourcen verwendet werden:
• V-wenn
• V-Show
• V-für (nur beim Einfügen und Löschen des Vue-Animated-List-Plugins)
• Dynamische Komponenten (siehe Komponenten zur Einführung)
• Auf dem Stammknoten der Komponente und von der VUE -Instanz -DOM -Methode ausgelöst (z. B. vm. $ Appendto (EL)).
Beim Einsetzen oder Löschen eines Elements mit einem Übergang wird Vue:
1. Versuchen Sie, das JavaScript -Übergangs -Hook -Objekt mit ID "My -Transformition" zu finden - Registrieren Sie sich bei der Option VUE.Transition (ID, Hooks) oder Übergänge. Wenn gefunden wird der entsprechende Haken in verschiedenen Phasen des Übergangs aufgerufen.
2. Schnüffeln Sie automatisch das Zielelement für CSS -Übergänge oder -animationen und fügen Sie den CSS -Klasse -Namen gegebenenfalls hinzu/entfernen Sie gegebenenfalls.
3. Wenn der JavaScript -Hook nicht gefunden wird und der CSS -Übergang/die CSS -Animation nicht erkannt wird, wird der DOM -Betrieb (Einfügen/Löschen) im nächsten Frame sofort ausgeführt.
CSS -Übergang
Beispiel
Ein typischer CSS -Übergang ist wie folgt:
<div v-if = "show" transition = "expt"> Hallo </div>
Fügen Sie dann CSS-Regeln für `.expand-transition`,` .expand-Inter` und `.expand-leave`: hinzu:
/* Erforderlich*/. Erweiterungstransition {Übergang: Alle .3s Leichtigkeit; Höhe: 30px; Polsterung: 10px; Hintergrundfarbe: #eee; Überlauf: Hidden;}/* .expand-Inner definiert den Startzustand* //* .expand-Leave definiert den Endzustand der Abreise*/. Expand-Enter, .expand-Leave {Höhe: 0; Polsterung: 0 10px; Opazität: 0;}Sie können durch dynamische Bindung unterschiedliche Übergänge zum gleichen Element erreichen:
<div v-if = "show": transition = "transitionName"> Hallo </div>
New Vue ({el: '...', Daten: {Show: Falsch, Übergangsame: 'Fade'}})Zusätzlich können JavaScript -Hooks bereitgestellt werden:
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) {// Cancellation}}})))Übergangs -CSS -Klassenname
Die Zugabe und das Umschalten von Klassennamen hängen vom Wert des Übergangsattributs ab. Zum Beispiel gibt es drei CSS -Klassennamen:
1..Fade-Übergang bleibt immer auf dem Element aufbewahrt.
2..Fade-Inner definiert den Anfangszustand des Eintritts in den Übergang. Wenden Sie ihn nur einen Frame an und löschen Sie ihn sofort.
3..Fade-Leave definiert den Endzustand, den Übergang zu verlassen. Wirksam zu Beginn des Abflugübergangs und löschen nach dem Ende.
Wenn das Übergangsattribut keinen Wert hat, sind die Klassennamen .V-Übergang, .v-Enter und standardmäßig .V-Leave.
Benutzerdefinierte Übergangsklassenname
1.0.14 Neu
Wir können einen benutzerdefinierten CSS -Übergangsklassennamen in einer Übergangs -JavaScript -Definition deklarieren. Diese benutzerdefinierten Klassennamen überschreiben die Standardklassennamen. Es kann sehr nützlich sein, wenn Sie mit CSS-Animationsbibliotheken von Drittanbietern wie Animate.css zusammenarbeiten müssen:
<div v-show = "ok" transition = "bounce"> schau mir beendig </div>
Vue.transition ('Bounce', {Enterclass: 'BounceInleft', Leaveclass: 'Bounceoutright'})Deklarieren Sie ausdrücklich den CSS -Übergangstyp
1.0.14 Neu
Vue.js muss dem Übergangselement einen Ereignishörer hinzufügen, um zuzuhören, wenn der Übergang endet. Basierend auf dem verwendeten CSS ist das Ereignis entweder ein Transitionend oder ein Animationend. Wenn Sie nur einen der beiden verwenden, kann Vue.js den entsprechenden Ereignisart automatisch basierend auf den effektiven CSS -Regeln schließen. In einigen Fällen muss jedoch ein Element möglicherweise zwei Arten von Animationen gleichzeitig haben. Zum Beispiel möchten Sie, dass Vue eine CSS -Animation auslöst, und das Element hat einen CSS -Übergangseffekt, wenn die Maus suspendiert wird. In diesem Fall müssen Sie den Animationstyp (Animation oder Übergang) explizit deklarieren, den Vue verarbeiten soll:
VUE.TRANSITIE ('Bounce', {// Dieser Übergangseffekt hört nur für `Animationend` event type: 'Animation'} an).Detaillierte Erklärung des Übergangsprozesses
Wenn sich die Eigenschaft anzeigen, wird Vue.js das <Div> -Element entsprechend einfügen oder löschen, wobei der Name der Übergangs -CSS -Klasse gemäß den folgenden Regeln geändert wird:
• Wenn die Show falsch wird, wird Vue.js:
1. Rufen Sie den BeeLeave -Haken an;
2. Fügen Sie den Namen der V-Leave-Klasse zum Element hinzu, um den Übergang auszulösen.
3. Rufen Sie den Urlaubshaken an;
4. Warten Sie, bis der Übergang endet (hören Sie sich das Übergangsereignis an);
5. Elemente aus dem DOM löschen und den Namen der V-Leave-Klasse löschen;
6. Rufen Sie den Afterleave -Haken an.
• Wenn die Show wahr wird, wird Vue.js:
1. Rufen Sie den voreinerhaltenden Haken an;
2. Fügen Sie den Namen der V-Inter-Klasse zum Element hinzu;
3. Einlegen Sie es in das DOM;
V.
5. CSS-Layout einmal erzwingen, um V-Enter wirksam zu machen. Löschen Sie dann den Namen der V-Inter-Klasse, um den Übergang auszulösen und zum ursprünglichen Zustand des Elements zurückzukehren.
6. Warten Sie, bis der Übergang endet;
7. Rufen Sie den After -Enter -Haken an.
Wenn ein Element entfernt wird, während sein Einstiegsübergang noch im Gange ist, wird der Entercancelled Hook aufgerufen, um Änderungen zu beseitigen oder erstellte Timer einzugeben. Gleiches gilt für den Rückgang des Übergangs.
Wenn alle oben genannten Haken bezeichnet werden, weist sie auf die Vue -Instanz hin, zu der sie gehören. Kompilierungsregeln: In welchem Kontext der Übergang zusammengestellt wird, ist dies dieser Punkt, an dem Kontext.
Schließlich können Sie eingeben und verlassen können einen zweiten optionalen Rückrufparameter haben, der explizit die Beenden des Übergangs steuert. Daher müssen Sie nicht auf das CSS -Übergangsereignis warten. Zum Beispiel:
Geben Sie: Funktion (el) {// Es gibt keinen zweiten Parameter // Das CSS -Übergangsereignis bestimmt, wann der Übergang endet}vs.
ENTER: Funktion (El, Done) {// Es gibt einen zweiten Parameter // Der Übergang endet nur, wenn `done` genannt wird}<p> Wenn mehrere Elemente zusammen übergehen, wird Vue.js verarbeitet und das Layout nur einmal erzwingen.
CSS -Animation
Die Verwendung der CSS -Animation wechselt zu CSS. Der Unterschied besteht darin, dass in der Animation der Name der V-Inter-Klasse nicht unmittelbar nach dem Einfügen des Knotens in das DOM gelöscht wird, sondern beim Auslösen des Animationend-Ereignisses gelöscht wird.
Beispiel: (Kompatibilitätspräfix weggelassen)
<span v-show = "show" transition = "bounce"> schau mich an! </span>. /* Ansonsten funktioniert die Skala-Animation nicht*/}. Bounce-Inner {Animation: Bounce-in .5s;}. Bounce-Leave {Animation: Bounce-out .5s;}@keyFrames Bounce-in {0% {Transformation: scale: 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); }}JavaScript -Übergang
Sie können auch JavaScript -Hooks verwenden, ohne CSS -Regeln zu definieren. Wenn Sie nur JavaScript verwenden, müssen die Eingabet- und Leaven -Hooks den abgeschlossenen Rückruf aufrufen, andernfalls werden sie synchron bezeichnet und der Übergang endet sofort.
Es ist eine gute Idee, CSS ausdrücklich zu deklarieren: Falsch für JavaScript -Übergänge, und Vue.js überspringt die CSS -Erkennung. Dies verhindert auch, dass die CSS -Regeln den Übergang versehentlich beeinträchtigen.
Im folgenden Beispiel verwenden wir JQuery, um einen benutzerdefinierten JavaScript -Übergang zu registrieren:
Vue.transition('fade', { css: false, enter: function (el, done) { // The element has been inserted into the DOM // Called after the animation $(el) .css('opacity', 0) .animate({ opacity: 1 }, 1000, done) }, enterCancelled: function (el) { $(el).stop() }, leave: function (el, done) OderVerwenden Sie dann die Übergangsfunktion:
<p transition = "fade"> </p>
Asymptotischer Übergang
Übergänge können zusammen mit V-für verwendet werden, um einen asymptotischen Übergang zu erzeugen. Fügen Sie ein Feature Stagger, Enter-Stagger hinzu oder lassen Sie Stagger zum Übergangselement:
<div v-for = "item in list" transition = "Stagger" Stagger = "100"> </div>
Alternativ können Sie einen Hakenstärke, Enter-Stagger oder eine bessere Kontrolle liefern, um eine bessere Kontrolle zu erhalten:
VUE.TRANSITION ('Stagger', {Stagger: Funktion (Index) {// Jedes Übergangselement fügt 50 ms Verzögerung hinzu //, aber die maximale Verzögerungsgrenze beträgt 300 ms math.min (300, Index * 50)}}})Dieser Artikel wurde in das Tutorial "Vue.js Front-End-Komponenten Learning" zusammengestellt, und jeder kann gerne lernen und lesen.
Für Tutorials zu Vue.js -Komponenten klicken Sie bitte auf das spezielle Thema VUE.JS -Komponenten -Lern -Tutorial zum Erlernen.
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.