Heim >Web-Frontend >CSS-Tutorial >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.
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.
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}
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!