Eine benutzerdefinierte Übergangsfunktion schreiben
Geben Sie aus einem benutzerdefinierten Übergang CSS- oder tick-Funktionen zurück, um das Ein- und Austreten aus dem DOM zu animieren.
Eine benutzerdefinierte Übergangsfunktion schreiben ist eine kostenlose Sveltejs Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Sveltejs Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Benutzerdefinierte Transitions
Neben den integrierten Möglichkeiten können Sie vollständig benutzerdefinierte Transition-Funktionen schreiben.
Funktionssignatur
Eine Transition-Funktion erhält (node, params) und gibt ein Optionsobjekt zurück.
function spin(node) {
return {
duration: 600,
css: (t) => `transform: rotate(${t * 360}deg); opacity: ${t};`
};
}Ihre Transition verwenden
Wenden Sie sie mit transition:spin auf ein beliebiges Element an.
CSS-Funktion
Geben Sie eine css(t, u)-Funktion zurück. t läuft von 0 bis 1; u von 1 bis 0.
JS-Funktion (tick)
Geben Sie für Werte, die sich nicht per CSS animieren lassen, stattdessen eine tick-Funktion zurück.
tick: (t) => node.textContent = Math.floor(t * 100) + "%";Wann CSS und wann tick
CSS ist schneller (GPU-beschleunigt). Verwenden Sie tick nur, wenn sich die Änderung nicht mit CSS ausdrücken lässt.
Easing
Wenden Sie Easing innerhalb Ihrer Funktion an oder akzeptieren Sie es als Parameter.
Verzögerung und Dauer
Geben Sie delay und duration im Optionsobjekt zurück.
Wiederverwendbare Bibliothek
Erstellen Sie ein Transitionsmodul für Ihr Designsystem.
Richtungsabhängigkeit
Das Framework ruft Ihre Funktion beim Enter auf; beim Exit wird die entgegengesetzte Richtung verwendet.
Mit in/out kombinieren
Sie können über in: und out: eine benutzerdefinierte Funktion für das Enter und eine andere für das Exit verwenden.
Kurzer Test
Welche Werte erhält die css-Funktion in einer Transition?
Zusammenfassung
Definieren Sie benutzerdefinierte Transitions, indem Sie aus einer Funktion { duration, css } oder { duration, tick } zurückgeben.
Häufig gestellte Fragen
Ist die Lektion „Eine benutzerdefinierte Übergangsfunktion schreiben“ kostenlos?
Ja — der vollständige Text von „Eine benutzerdefinierte Übergangsfunktion schreiben“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Sveltejs Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Eine benutzerdefinierte Übergangsfunktion schreiben“?
Geben Sie aus einem benutzerdefinierten Übergang CSS- oder tick-Funktionen zurück, um das Ein- und Austreten aus dem DOM zu animieren. Du übst Sveltejs Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Sveltejs Academy zu starten?
Keine Vorkenntnisse erforderlich. Sveltejs Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Eine benutzerdefinierte Übergangsfunktion schreiben“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Sveltejs Academy-Lektion Code schreiben und ausführen?
Ja. Jede Sveltejs Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Eine benutzerdefinierte Übergangsfunktion schreiben
- Übergangsparameter: node duration delay
- Einen morphenden Übergang erstellen
- CSS- oder JavaScript-Übergänge