Erstellen Sie Ihre erste eigene Svelte-Transition

Die Svelte transition API bietet eine erstklassige Möglichkeit, Ihre Komponenten beim Ein- oder Ausblenden aus dem Dokument zu animieren, einschließlich eigener Svelte-Transitions. Standardmäßig verwendet die transition-Direktive CSS-Animationen, die im Allgemeinen eine bessere Leistung bieten und den Haupt-Thread des Browsers nicht blockieren. Die API ist so einfach wie folgt: <element transition:transitionFunction />. Sie können auch die Direktiven in oder out angeben, die unidirektionale Transitions sind und nur ausgeführt werden, wenn das Element gemountet oder unmountet wird.

Svelte bietet ein Laufzeitpaket namens svelte/transition, das sieben vorab verpackte Svelte-Transitionsfunktionen enthält, die Sie nach Belieben einsetzen und anpassen können. In Kombination mit dem Paket svelte/easing ist eine breite Palette von Interaktionen möglich, ohne dass Sie selbst Code schreiben müssen. Experimentieren Sie mit verschiedenen Transitions und Easing-Funktionen, um ein Gefühl dafür zu bekommen, was möglich ist.

Suchen Sie nach Anleitungen für den Einstieg in Svelte? Wir haben eine solide Übersicht für Sie.

Die Svelte Custom Transition API

Wenn Sie noch mehr Kontrolle benötigen, als die Svelte Transition API standardmäßig bietet, erlaubt Svelte Ihnen, Ihre eigene benutzerdefinierte Transition-Funktion anzugeben, solange Sie einige Konventionen einhalten. Aus den Dokumenten sieht die benutzerdefinierte Transition API wie folgt aus:

transition = (node: HTMLElement, params: any) => {
  delay?: number,
  duration?: number,
  easing?: (t: number) => number,
  css?: (t: number, u: number) => string,
  tick?: (t: number, u: number) => void
} 

Lassen Sie uns das aufschlüsseln. Eine Transition-Funktion erhält eine Referenz auf den DOM-Knoten, an dem die transition-Direktive verwendet wird, und gibt ein Objekt mit einigen Parametern zurück, die die Animation steuern, und vor allem eine css- oder tick-Funktion.

Die css-Funktion gibt eine Zeichenkette von CSS zurück, die die Animation beschreibt, typischerweise mit einer Art Transformations- oder Opazitätsänderung. Alternativ können Sie eine tick-Funktion zurückgeben, die Ihnen die volle Kontrolle über jeden Aspekt der Animation mit der Macht von JavaScript gibt, aber dies bringt Leistungseinbußen mit sich, da diese Art von Transition keine CSS-Animationen verwendet.

Sowohl die css- als auch die tick-Funktionen erhalten konventionell zwei Parameter, (t, u). t ist eine Dezimalzahl, die von 0.00 auf 1.00 hochläuft, während das Element in den DOM eintritt, und von 1.00 zurück auf 0.00 fällt, wenn das Element den DOM verlässt. Der Parameter u ist zu jedem Zeitpunkt das Gegenteil von t oder 1 - t. Wenn Sie beispielsweise eine Zeichenkette wie transform: scale(${t}) zurückgeben, würde Ihr Element beim Eintreten sanft von 0 auf 1 animiert und umgekehrt beim Austreten.

Diese Konzepte mögen etwas abstrakt erscheinen, also lassen Sie sie uns festigen, indem wir unsere eigene benutzerdefinierte Svelte-Transition erstellen!

Erstellen Sie Ihre erste eigene Svelte-Transition

Zuerst richten wir einiges an Boilerplate ein, das uns ermöglicht, die Existenz eines Elements im DOM mit einem Svelte #if-Block umzuschalten. Denken Sie daran, dass Svelte-Transitions nur ausgeführt werden, wenn ein Element tatsächlich den DOM verlässt oder betritt.

<script>
  let showing = true
</script>

<label for="showing">
  Showing
</label>
<input id="showing" type="checkbox" bind:checked={showing} />

{#if showing}
  <h1>Hello custom transition!</h1>
{/if}

Sie sollten das Kontrollkästchen umschalten und sehen können, wie unser Element schlicht und einfach erscheint und verschwindet.

Als Nächstes richten wir unsere benutzerdefinierte Svelte-Transition-Funktion ein und verbinden sie mit unserem Element.

<script>
  let showing = true
  // Custom transition function
  function whoosh(node) {
    console.log(node)
  }
</script>

<label for="showing">
  Showing
</label>
<input id="showing" type="checkbox" bind:checked={showing} />

{#if showing}
  <h1 transition:whoosh>Hello custom transition!</h1>
{/if}

Wenn Sie nun das Kontrollkästchen umschalten, sehen Sie, dass das <h1>-Element in der Konsole protokolliert wird. Das beweist, dass die benutzerdefinierte Transition korrekt verbunden ist! Wir werden den DOM-Knoten in unserem Beispiel nicht wirklich verwenden, aber es ist oft nützlich, Zugriff auf das Element zu haben, um seine aktuellen Stile oder Abmessungen zu referenzieren.

Damit unser Element überhaupt eine Animation ausführt, müssen wir ein Objekt zurückgeben, das eine css- (oder tick-) Funktion enthält. Lassen Sie unsere css-Funktion eine einzelne Zeile CSS zurückgeben, die unser Element skaliert. Wir geben auch eine duration-Eigenschaft zurück, die steuert, wie lange die Animation dauert.

<script>
  function swoop() {
    return {
      duration: 1000,
      css: () => `transform: scale(.5)`
    }
  }
  let showing = true
</script>

<!-- markup -->

Wir haben etwas in Bewegung gesetzt! Sie werden feststellen, dass unser Element beim Umschalten des Kontrollkästchens direkt auf die Skalierung .5 springt. Das ist schon etwas, aber es würde sich viel besser anfühlen, wenn es sich sanft übergangsmäßig ändern würde. Hier kommen die Parameter (t, u) ins Spiel.

<script>
  function swoop() {
    return {
      duration: 1000,
      css: (t) => `transform: scale(${t})`
    }
  }
  let showing = true
</script>

<!-- markup -->

Jetzt reden wir! Denken Sie daran, t rollt sanft von 0.00 auf 1.00, wenn ein Element eintritt, und umgekehrt, wenn es austritt. Dies ermöglicht uns, den gewünschten sanften Effekt zu erzielen. Tatsächlich ist das, was wir gerade geschrieben haben, im Wesentlichen die eingebaute scale-Transition aus dem Paket svelte/transition.

Machen wir es ein wenig ausgefallener. Um dem Namen unserer benutzerdefinierten Svelte-Transition, swoop, gerecht zu werden, fügen wir unserem transform ein translateX hinzu, damit unser Element von der Seite herein- und herauszoomt.

Ich möchte Sie herausfordern, die Implementierung zuerst selbst zu versuchen, bevor wir weitermachen. Glauben Sie mir, das wird Spaß machen! Gehen Sie davon aus, dass wir auf 100 % übersetzen wollen, wenn das Element den Bildschirm verlässt, und zurück auf 0 %, wenn es eintritt.

[wartet…]

Wie lief es? Möchten Sie die Antworten vergleichen?

Hier ist, was ich bekommen habe

css: (t, u) => `transform: scale(${t}) translateX(${u * 100}%);`

Es ist in Ordnung, wenn Sie etwas anderes haben! Lassen Sie mich aufschlüsseln, was ich getan habe.

Das Wichtigste hier ist die Verwendung des zweiten Parameters in der css-Funktion. Wenn wir an unsere Animation denken, während das Element auf den Bildschirm eintritt, wollen wir bei scale(1) translateX(0%) enden, also können wir nicht für scale und transform das unveränderte t verwenden. Das ist die Bequemlichkeit des u-Parameters – er ist zu jedem Zeitpunkt das Gegenteil von t, sodass wir wissen, dass er 0 sein wird, wenn t 1 ist! Ich habe dann u mit 100 multipliziert, um den Prozentwert zu erhalten, und am Ende das %-Zeichen angehängt.

Das Verständnis der Wechselwirkung zwischen t und u ist ein wichtiger Teil des Puzzles der benutzerdefinierten Transition in Svelte. Diese beiden Parameter ermöglichen eine Welt voller Dynamik für Ihre Animationen; sie können geteilt, multipliziert, verdreht oder verbogen werden, je nach Ihren Bedürfnissen.

Fügen wir unsere Lieblings-svelte/easing-Funktion zu unserer Transition hinzu und machen Feierabend.

<script>
  import { elasticOut } from 'svelte/easing'
  function swoop() {
    return {
      duration: 1000,
      easing: elasticOut,
      css: (t, u) => `transform: scale(${t}) translateX(${u * 100}%)`
    }
  }
  let showing = true
</script>

<label for="showing">
  Showing
</label>
<input id="showing" type="checkbox" bind:checked={showing} />

{#if showing}
  <h1 transition:swoop>Hello custom transition!</h1>
{/if}

Zusammenfassung

Glückwunsch! Sie können jetzt eine benutzerdefinierte Svelte-Transition-Funktion erstellen. Wir haben nur an der Oberfläche dessen gekratzt, was möglich ist, aber ich hoffe, Sie fühlen sich mit den Werkzeugen ausgestattet, um noch weiter zu erforschen. Ich empfehle dringend, die Dokumentation zu lesen und das offizielle Tutorial durchzugehen, um noch mehr Vertrautheit zu erlangen.