Hallo Habr! Ich beschloss, meine Tätigkeit mit der Übersetzung von Artikeln ins Russische zu beginnen, was mir selbst sehr zugute kam. Ich hoffe, Sie sind nützlich. Ich stelle fest, dass ich versucht habe, literarisch zu übersetzen, nicht wörtlich.
Zunächst
stelle ich eine Übersetzung des Artikels
"Vue.js rendern Funktionen und Übergänge" von Hajime Yamasaki Vukelic vor.
Vue.js rendern Funktionen und Übergänge
Die Vue.js-Dokumentation zu Renderfunktionen ist schlecht. Für Benutzer, die JSX mit Renderfunktionen verwenden, kann dies zu Problemen führen. In diesem Artikel wird erläutert, wie in diesem bestimmten Szenario Übergänge erstellt werden.
In den Beispielen verwende ich JSX, aber alles funktioniert mit einfachen JavaScript-Rendering-Funktionen, da JSX nur syntaktischer Zucker für h () -Aufrufe ist. Wenn Sie mehr über dieses Thema erfahren möchten, lesen Sie diesen
Artikel .
Wie Übergänge im Allgemeinen funktionieren
Das Wesentliche bei Übergängen ist, dass Sie über eine integrierte Übergangskomponente verfügen, die Elementen Elemente zuweist, die bereitgestellt (eingegeben) oder nicht bereitgestellt (verlassen) werden.
Pikabu-Tanz
Die Hauptnuance: Wie wird der Ort der Installation oder Demontage von Elementen bestimmt? Dieses Problem kann auf verschiedene Arten gelöst werden.
Mit dem ternären Operator können Sie das Erscheinen / Verschwinden eines Elements implementieren:
render(h) { <transition> {this.showDiv ? <div class="myDiv">Hello</div> : null} </transition> }
oder um einen Artikel durch einen anderen zu ersetzen:
render(h) { <transition> {this.showOneOrTheOther ? <div class="myDiv">Hello</div> : <div class="myOtherDiv">Hello again</div> } </transition> }
Nein, ich habe nur Spaß gemacht. Natürlich können Sie den ternären Operator nicht ohne zusätzliche Parameter verwenden, um solche Elemente zu ersetzen. Es gibt jedoch eine Nuance. Der Vergleichsalgorithmus entscheidet, dass dort bereits ein Element vorhanden ist. Statt es aus dem DOM zu löschen, wird es nur so korrigiert, dass es wie ein anderes Element aussieht.
Es ist besser, wenn Sie beim Ersetzen von Elementen den Schlüssel verwenden:
render(h) { <transition> {this.showOneOrTheOther ? <div key="myDiv" class="myDiv">Hello</div> : <div key="myOtherDiv" class="myOtherDiv">Hello again</div> } </transition> }
Wenn es einen Schlüssel gibt, werden zwei Elemente vollständig geändert (das alte wird zerlegt und das neue an seiner Stelle montiert), während die Schlüssel unterschiedlich sind.
Wenn Sie eine Komponente oder ein Element von einer anderen Komponente / demselben Element austauschen möchten:
render(h) { <transition> <div key={this.subcomponentKey}> <MyComponent /> </div> </transition> }
Im obigen Beispiel berechnet die Methode this.subcomponentKey irgendwie den entsprechenden Schlüssel für die MyComponent-Komponente.
Hauptunterschiede
Denken Sie beim Sprechen über Schlüssel daran, dass Elemente / Komponenten immer vollständig angezeigt werden, wenn der Schlüssel geändert wird. Auf der anderen Seite ändern sich die Elemente / Komponenten nicht, solange der Schlüssel gleich bleibt.
Lassen Sie sich nicht überraschen. Überlegen Sie sorgfältig, welchen Wert dieser Schlüssel haben sollte, bevor Sie versehentlich fast allem, was sich bewegt (oder bewegen sollte), einen Schlüssel hinzufügen. Überprüfen Sie zuerst ohne Schlüssel, notieren Sie die Ergebnisse und fügen Sie dann den Schlüssel hinzu, um festzustellen, ob Sie den gleichen Effekt wiederholen können. Wenn die Benutzeroberfläche nicht aktualisiert wird, haben Sie wahrscheinlich den falschen Schlüsselwert ausgewählt.
Animation hinzufügen
Jetzt, da wir wissen, wie wir unsere Elemente verschwinden lassen können, ist es Zeit, an der Animation zu arbeiten.
Im einfachsten Fall haben wir zwei Klassen. Eine Klasse wird immer angewendet, und die andere wird angewendet, wenn ein Element / eine Komponente zusammen- oder abmontiert wird.
// my.css .base { transition: transform 1s; } .out { transform: translateX(-100vw); }
Fügen Sie nun diese Klassen zum Code hinzu:
render(h) { <transition enter-class="out" leave-to-class="out"> {this.someProp ? <div class="base">Hello</div> : null} </transition> }
Diese Klassen (Enter-Class und Leave-to-Clas) sind in der
Dokumentation ausführlich beschrieben. Lesen Sie dort darüber.
Die enter-Klasse dient als Repository für Stile, die unmittelbar nach dem Mounten eines Elements angewendet werden. Unmittelbar danach wird die Klasse gelöscht. Wir fügen Übergänge hinzu, um eine Animation zwischen dem Zeitpunkt, zu dem die Enter-Klasse verwendet wird, und dem Zeitpunkt, zu dem sie nicht vorhanden ist (wenn nur die .base-Klasse verwendet wird), zu erstellen.
Die Klasse "Klasse verlassen" wird unmittelbar vor dem Löschen eines Elements angewendet. Vue.js wartet dann auf den Abschluss der Animation und entfernt das Element aus dem DOM-Baum. Auch hier verwenden wir Übergänge, um Animationen zu erstellen.
In unserem Beispiel haben wir dieselbe .out-Klasse zum Ein- und Beenden verwendet, aber wir können für zwei Ereignisse unterschiedliche Klassen verwenden.
Fazit
Ich hoffe, Sie verstehen jetzt die Schlüsselkonzepte der Vue.js-Übergänge, wenn sie in Rendering-Funktionen und mit JSX verwendet werden. Die Übergänge von Vue.j bieten jedoch viel mehr Funktionen, z. B. die Möglichkeit, mithilfe von JavaScript eine Verbindung zu Übergangsereignissen herzustellen und daher auch einige Dinge zu tun, die nicht mit Animation zusammenhängen (ähnlich wie Lebenszyklus-Traps). Ich werde den Artikel hier beenden und die Experimente meinen lieben Lesern überlassen.
Viel Spaß beim Hacken!