Übergangsparameter: node duration delay
Nehmen Sie in Ihrer Übergangsfunktion einen Knoten und ein Parameterobjekt entgegen, um flexibel zu bleiben.
Übergangsparameter: node duration delay ist eine kostenlose Sveltejs Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.
Funktionssignatur
Benutzerdefinierte Transitions akzeptieren (node, params) und bieten dadurch Flexibilität.
node auslesen
Verwenden Sie node, um Eigenschaften wie die aktuelle Größe oder Position zu berechnen.
const rect = node.getBoundingClientRect();Parameter übergeben
Die aufrufende Stelle übergibt params mit der Direktive.
<p transition:spin={{ duration: 800 }}>...Standardwerte
Behandeln Sie fehlende params mit Standardwerten innerhalb der Funktion.
function spin(node, { duration = 600 } = {}) { ... }Reaktive Parameter
Parameteränderungen starten eine laufende Transition nicht erneut; beim nächsten Mounten wird der neue Wert verwendet.
Berechnete Dauer
Sie können die Dauer aus Daten berechnen, etwa aus der Wortlänge für Typewriter-Effekte.
Easing-Parameter
Akzeptieren Sie einen Easing-Parameter, damit die aufrufende Stelle die Kurve anpassen kann.
Verzögerungsparameter
Staffeln Sie Einblendungen, indem Sie eine aus einem Index abgeleitete Verzögerung übergeben.
{#each items as item, i}
<p transition:fly={{ delay: i * 50 }}>{item}</p>
{/each}Tipps für CSS-Strings
Geben Sie kombinierbare Transforms zurück und vermeiden Sie Layout-berechnende Eigenschaften wie top/left.
Performance
Beschränken Sie sich auf transform und opacity, um besonders flüssige Animationen zu erhalten.
Testen
Untersuchen Sie während einer Transition die berechneten Styles mit den DevTools des Browsers.
Kurzer Test
Was stellt das params-Objekt bereit?
Zusammenfassung
Akzeptieren und verwenden Sie params für flexible Transitions. Stellen Sie Standardwerte für fehlende Werte bereit.
Häufig gestellte Fragen
Ist die Lektion „Übergangsparameter: node duration delay“ kostenlos?
Ja — der vollständige Text von „Übergangsparameter: node duration delay“ 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 „Übergangsparameter: node duration delay“?
Nehmen Sie in Ihrer Übergangsfunktion einen Knoten und ein Parameterobjekt entgegen, um flexibel zu bleiben. 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 2 von 4.
Wie lange dauert die Lektion „Übergangsparameter: node duration delay“?
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