So implementieren Sie Sveltes Defer Transition in Vue

Ich habe mir vor Kurzem Rich Harris‘ Video „Rethinking Reactivity“ angesehen. Ich war von der Effizienz des Svelte-Frameworks begeistert und habe eine native Unterstützung für Animationen entdeckt, die Vue nicht bietet – verzögerte Übergänge.

Schauen wir uns zunächst die Wirkung des sogenannten „Defer-Übergangs“ von Svelte an.

Dies ist die mit Svelte erstellte Todo-Demo-App. Das gesamte To-Do ist in 3 Teile gegliedert. Eingabebereich, Aufgabenliste und Erledigt-Liste. Wenn Sie auf ein Element in der Aufgabenliste klicken, wird das entsprechende Element in die Erledigt-Liste „verschoben“ und umgekehrt.

Hierbei werden Elemente nicht abrupt blinkend von einer Liste in die andere übertragen, sondern bewegen sich ganz einfach vom Klickpunkt zum Ziel; gleichzeitig rücken, wenn ein Element die Liste verlässt, die verbleibenden Elemente reibungslos nach und füllen die freie Position. In Svelte kann dies durch Hinzufügen von nur wenigen Codezeilen erreicht werden, was sehr entwicklerfreundlich und effizient ist. Siehe den folgenden Code oder das Svelte-Tutorial

{#each todos.filter(t => !t.done) als todo (todo.id)}
    <Bezeichnung
	in:empfangen="{{key: todo.id}}"
        aus:senden="{{key: todo.id}}"
        animieren: umdrehen>
        <Eingabetyp=Kontrollkästchen ein: ändern={() => mark(todo, true)}>
            {todo.Beschreibung}
            <button on:click="{() => remove(todo)}">entfernen</button>
    </Bezeichnung>
{/jede}

Dem Element werden nur die Attribute „in“, „out“ und „animate“ hinzugefügt. Dabei akzeptieren „in“ und „out“ die jeweils vom Framework bereitgestellten Empfangs- und Sendefunktionen und stellen Filterbedingungen für diese bereit. Die Animationseigenschaft akzeptiert die integrierte Flip-Methode. Mit „Flip“ ist hier nicht das Umdrehen gemeint, sondern die FLIP-Technologie, die vue auch in <transition-group> verwendet. Wird hauptsächlich verwendet, um die verbleibenden Elemente in der gesamten Liste zu verschieben und so die Positionen verlorener Elemente zu füllen.

Daher habe ich mich gefragt, wie ich den entsprechenden Effekt erzielen kann, wenn es Vue ist. (Wenn Sie die ausführliche Anleitung nicht lesen möchten, können Sie den Code direkt im Codestift ansehen)

Vue bietet nativ zwei Komponenten zur Unterstützung von Animationen. Übergang und Übergangsgruppe. Da es sich um eine Listenbewegung handelt, verwenden wir hier Übergangsgruppen. Informationen zur spezifischen Verwendung finden Sie im Vue-Tutorial „Übergänge und Animationen“.

Um denselben Effekt zu erzielen, müssen zwei wichtige UI-Animationseffekte implementiert werden.

Wenn ein Element in einer Liste verschwindet, werden die verbleibenden Elemente verschoben, um den leeren Raum zu füllen. Wenn ein Element verschwindet und in eine andere Liste eingefügt wird, wird das Element verschoben. Die erste Anforderung ist relativ einfach umzusetzen. Vue native bietet bereits gute Unterstützung. Weitere Informationen finden Sie unter List-Move-Transitions in der Vue-Dokumentation.

Um die zweite Anforderung zu erfüllen, müssen mehrere Probleme gelöst werden:

1. Standortinformationen verschwundener Gegenstände
2. Informationen zum Eintragsort einfügen
3. Wann sollen Animationen gestartet und beendet werden?
   

Sehen wir uns zunächst an, wie die ersten beiden Probleme gelöst werden können. Laut Dokumentation stellt die Übergangsgruppe einen JavaScript-Hook bereit. Sie sind:

 v-on:vor-Eintreten
 v-on:eingeben
 v-on:nach-Eingabe
 v-on:Eingabe abgebrochen

 v-on:vor-Abreise
 v-on:verlassen
 v-on:nach-Urlaub
 v-on:Urlaub abgesagt

Wenn wir es visualisieren, könnte es so aussehen:

before-enter: Wird verwendet, um den Anfangswert des Übergangs zum Einfügen eines Eintrags festzulegen. BoundingClientRect konnte nicht abgerufen werden. Geben Sie derzeit Folgendes ein: Animationszeitraum. Zu diesem Zeitpunkt kann der Parameter el der Enter-Hook-Funktion boundingClientRect erhalten after-enter: Rückruffunktion nach Ende der Animation enter-cancelled: Enter-Hook abbrechen

Gleiches gilt für den Urlaub.

Daher können wir die DOMRect-Informationen des Eintragselements nur beim Ein- und Austreten abrufen.

Auf diese Weise können wir die DOMRect-Daten des Abwesenheitselements abrufen und beim Verlassen speichern. Beim Eingeben können wir die Standortinformationen sowohl des verlassenen als auch des eingegebenen Elements abrufen.

Die Standortinformationen werden abgerufen, aber wie können wir den Eintrag aus dem verschwundenen Eintrag verschieben, wenn der Eintrag eingegeben wird? (Denken Sie zuerst darüber nach und lesen Sie dann die Erklärung unten).

Wenn wir also den Effekt der Bewegung erzielen möchten, müssen wir zuerst das verlassene Element ausblenden.

verlassen(el, fertig) {
      console.log("vor dem Verlassen");
      const rect = el.getBoundingClientRect();
      sendRectMap.set(el.dataset.key, rechteck);
      el.style.display = "keine";
},

Legen Sie dann den Anfangspositionsstatus für das Element „Enter Item“ fest. Die Anfangsposition ist die Position des Elements „Leave Item“. Wenn der Übergang wirksam wird, stellen Sie seine Position auf die Einfügeposition (Eingabe) zurück.

Bei dieser Methode handelt es sich eigentlich um die sogenannte FLIP-Technologie. Diese Technik wird auch in der Übergangsgruppenkomponente verwendet, um die verbleibende Liste zu verschieben und die entfernten Elemente zu füllen.

var first = el.getBoundingClientRect();

//Setzen Sie nun das Element an die letzte Position.
el.classList.add('totes-am-Ende');

// Nochmals lesen. Dies erzwingt eine Synchronisierung
// Layout, also seien Sie vorsichtig.
var last = el.getBoundingClientRect();

// Sie können dies für andere berechnete
// Stile, falls nötig. Sei einfach
// Achten Sie darauf, nur den Compositor zu verwenden
// Eigenschaften wie Transformieren und Opazität
// wo möglich.
var invert = erstes.oben - letztes.oben;

// Invertieren.
el.style.transform =
    ``übersetzeY(${invert}px)``;

// Warte auf den nächsten Frame, damit wir
// wissen, alle Stiländerungen haben
// gegriffen.
requestAnimationFrame(Funktion() {

  // Animationen einschalten.
  el.classList.add('Animation bei Transformationen');

  // GEH, GEH, GEH!
  el.style.transform = '';
});

Die nächste Frage ist dann, wann der Anfangszustand des Übergangs zum Eingabeelement und wann der Endzustand des Übergangs zum Eingabeelement festgelegt werden soll.

Gemäß dem oben erwähnten JavaScript-Hook können wir den Anfangszustand in der Before-Enter-Hook-Funktion festlegen und dann den Übergangsendzustand in der Enter-Hook-Funktion festlegen. Also, was ist unser Ausgangszustand? Über getBoundingClientRect können wir die DOMRect-Daten des Eingabeelements (später durch „to“ identifiziert) abrufen, einschließlich oben, links, unten, rechts, Breite, Höhe, x, y. Gleichzeitig können wir über die zuvor gespeicherte Urlaubspositionskarte auch die Standortinformationen des Urlaubseintrags (aufgerufen von) abrufen. Daher verwenden wir vor dem Eingeben den berechneten Offset, um die Position des Zielelements durch Übersetzen zu initialisieren. Übersetzen Sie dann in der Eingabephase den Wert in „von“ und fügen Sie dem CSS einen Übergang hinzu.

Im Before-Enter-Hook:

        // Kennung des mobilen Elements const key = el.dataset.key;
        // Eintragskarte eingeben, beachten Sie hier, im Before-Enter-Hook,
        // receiveRectMap kann nicht erreicht werden. Erfordert besondere Behandlung. Später wird erwähnt, dass const to = receiveRectMap.get(key);
        //Eintragskarte verlassen
        const from = sendRectMap.get(Schlüssel);

        // Den Versatz berechnen const dx = from.left - to.left;
        const dy = von oben – nach oben;
        
        // Initialisiere die Position des Elements el.style.transform = `translate(${dx}px, ${dy}px)`;
        el.style.opacity = 0;

Im Enter-Hook:

        el.style.transition = "alle 800 ms";
        el.style.transform = "";
        el.style.opacity = 1;
        el.style.display = "Block";

Im obigen Code wird „to“ im Before-Enter-Modus über „receiveRectMap.get(key)“ abgerufen. Allerdings gibt es derzeit keinen DOMRect-Wert, der dem Schlüssel in receiveRectMap entspricht. Obwohl der Eingabeparameter von before-enter el (HTMLElement) ist, sind alle Werte im DOMRect des el-Elements 0, daher müssen wir el in der Enter-Methode in receiveRectMap einfügen. Dies führt zu einem Widerspruch, d. h. es ist nicht möglich, die Position des Elements „to“ durch Übersetzen im Before-Enter-Vorgang zu initialisieren. Daher verwenden wir hier die Technik der Übergangsverzögerung, um das Auftreten des Übergangs zu verzögern.

Wir können setTimeout oder requestAnimationFrame in der Eingabe verwenden, um einen verzögerten Übergang zu implementieren.

requestAnimationFrame(() => {
        const Schlüssel = el.dataset.Schlüssel;
		  // Auf diese Weise erhält receiveRectMap den Wert des Schlüssels.
        const to = receiveRectMap.get(Schlüssel);
        const from = sendRectMap.get(Schlüssel);

        const dx = von.links - nach.links;
        const dy = von oben – nach oben;

        // Da wir den Übergang verzögert haben,
        // Damit die Position des Zielelements tatsächlich die Zielposition erreicht hat,
        // Daher müssen wir den Übergang verwenden, um manuell zur Ausgangsposition zu wechseln. Diese Zeile ist sehr wichtig el.style.transition = "all 0ms";
        el.style.transform = `übersetzen(${dx}px, ${dy}px)`;
        
        // Nach der Initialisierung im nächsten Animationsbild die FLIP-Technologie verwenden, um es zurückzubewegen.
	requestAnimationFrame(() => {
          el.style.transition = "alle 800 ms";
          el.style.transform = "";
          el.style.opacity = 1;
          el.style.display = "Block";
        });
      });

Den kompletten Code finden Sie in Codepen

Endergebnis:

Oben finden Sie Einzelheiten zur Implementierung von Sveltes Defer Transition in Vue. Weitere Informationen zur Implementierung von Sveltes Defer Transition in Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!