Machen Sie Ihren ersten Seltsamen -Sufle -Übergang

Die Transition -API von Selte bietet eine leistungsstarke Möglichkeit, Komponenten einzugeben oder das DOM zu verlassen, einschließlich der Erstellung von benutzerdefinierten Übergängen. Die standardmäßige Nutzung von CSS -Animationen gewährleistet eine optimale Leistung. Die grundlegende Syntax ist einfach:<element transition:transitionfunction=""></element> . Sie können auch in für One-Way-Übergänge out .

svelte/transition Paket von Selte bietet sieben vorgefertigte Übergangsfunktionen, die mit svelte/easing für verschiedene Animationseffekte ohne Schreiben benutzerdefinierter Code leicht angepasst werden können. Experimentieren Sie mit diesen, um die Möglichkeiten zu erfassen.

Benötigen Sie eine schlanke Einführung? Wir haben einen umfassenden Überblick.

Bastelnde benutzerdefinierte SufleTe -Übergänge erstellen

Für eine feinere Steuerung über vorgefertigte Optionen hinaus ermöglicht SVELTE die Definition benutzerdefinierter Übergangsfunktionen, vorbehaltlich spezifischer Konventionen. Die API -Struktur lautet, wie dokumentiert,:

 Transition = (Knoten: Htmlelement, Params: Any) => {
  Verzögerung ?: Nummer,
  Dauer ?: Nummer,
  Lockern ?: (t: Nummer) => Nummer,
  CSS ?: (T: Nummer, u: Nummer) => String,
  tick ?: (t: number, u: nummer) => void
}

Eine Übergangsfunktion empfängt den DOM -Knoten und gibt ein Objekt mit Animationsparametern zurück. Entscheidend ist, dass es eine css oder tick enthält.

Die css -Funktion gibt eine CSS -Zeichenfolge zurück, die die Animation definiert (z. B. Änderungen der Deckkraft). Die tick -Funktion bietet eine vollständige JavaScript -Steuerung, aber zu Leistungskosten, wenn sie CSS -Animationen umgeht.

Sowohl css als auch tick verwenden Parameter t (0,00 bis 1,00 beim Eintrag, 1,00 bis 0,00 beim Ausgang) und u (1 - t ). Zum Beispiel transform: scale(${t}) sanft von 0 bis 1 beim Eintrag und kehrt beim Ausgang um.

Erstellen wir einen benutzerdefinierten Übergang, um zu veranschaulichen.

Ihr erster benutzerdefinierter Sumente -Übergang

Wir beginnen mit einem einfachen Umschalter, um die DOM -Präsenz eines Elements mit einem Sufle #if -Block zu steuern (denken Sie daran, Übergänge treten nur beim DOM -Eintrag/-ausgang auf).

<script>
  let showing = true;
</script>

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

{#if anzeigen}
  <h1>Hallo benutzerdefinierte Übergang!</h1>
{/Wenn}

Das Schalter des Kontrollkästchens zeigt das starke Erscheinungsbild/Verschwinden. Fügen wir nun eine benutzerdefinierte Übergangsfunktion hinzu:

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

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

{#if anzeigen}
  <h1 transition:whoosh="">Hallo benutzerdefinierte Übergang!</h1>
{/Wenn}

Das Umschalten nun das Element an der Konsole abzumelden und die Verbindung zu bestätigen. Wir werden dies mit Animation verbessern. Erstellen wir eine css -Funktion zur Skalierung:

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

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

{#if anzeigen}
  <h1 transition:swoop="">Hallo benutzerdefinierte Übergang!</h1>
{/Wenn}

Das Element skaliert jetzt, aber abrupt. Verwenden Sie t für reibungslose Animation:

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

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

{#if anzeigen}
  <h1 transition:swoop="">Hallo benutzerdefinierte Übergang!</h1>
{/Wenn}

Für einen "Swoping" -Effekt fügen wir translateX hinzu, die von der Seite animieren:

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

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

{#if anzeigen}
  <h1 transition:swoop="">Hallo benutzerdefinierte Übergang!</h1>
{/Wenn}

Hier kontrolliert u (Inverse of t ) die translateX und sorgt für eine reibungslose Bewegung.

Lassen Sie uns schließlich eine Lockerungsfunktion hinzufügen:

<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">
  Zeigen
</label>
<input type="checkbox" bind:checked="{showing}" id="showing">

{#if anzeigen}
  <h1 transition:swoop="">Hallo benutzerdefinierte Übergang!</h1>
{/Wenn}

Abschluss

Sie haben jetzt einen benutzerdefinierten Svelte -Übergang erstellt! Dies ist nur ein Ausgangspunkt; Erkunden Sie die Dokumentation und Tutorials für fortschrittlichere Techniken. Das Verständnis des Zusammenspiels von t und u ist der Schlüssel zum Erstellen dynamischer Animationen.

Das obige ist der detaillierte Inhalt vonMachen Sie Ihren ersten Seltsamen -Sufle -Übergang. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!