Übergangsparameter: duration delay easing
Passen Sie Übergänge an, indem Sie die Parameter duration, delay und easing übergeben.
Übergangsparameter: duration delay easing 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.
Das Parameterobjekt
Alle Transitions akzeptieren ein Optionsobjekt als zweites Argument.
<p transition:fade={{ duration: 600, delay: 200 }}>duration
Gesamtdauer der Animation in Millisekunden. Standardwert: 400 ms.
delay
Warten Sie vor dem Start der Animation. Das ist für sequenzierte Benutzeroberflächen nützlich.
easing
Eine Funktion, die den linearen Fortschritt (0..1) auf eine benutzerdefinierte Kurve abbildet. Standardmäßig linear.
Integrierte Easing-Funktionen
Importieren Sie aus svelte/easing: linear, quadIn, cubicOut, elasticOut und weitere.
import { elasticOut } from "svelte/easing";Optionen pro Transition
Jede Transition hat eigene Parameter. Fly fügt x und y hinzu, scale fügt start hinzu.
Dauer auswählen
Kurze Dauern (100–200 ms) eignen sich für Mikrointeraktionen, längere (400–700 ms) für Seitenübergänge.
Reaktive Parameter
Parameterwerte können vom reaktiven Zustand abhängen.
<p transition:fly={{ x: dir * 200 }}>...Standardverhalten
Wenn Sie das Parameterobjekt weglassen, werden sinnvolle Standardwerte verwendet.
An das Design anpassen
Passen Sie Dauer und Easing an, bis sich die Bewegung richtig anfühlt, und testen Sie auf einem echten Gerät.
Barrierefreiheit
Berücksichtigen Sie prefers-reduced-motion, indem Sie die Dauer verkürzen oder Transitions überspringen.
Kurze Prüfung
Woher kommen Easing-Funktionen?
Zusammenfassung
Passen Sie duration, delay und easing (aus svelte/easing) an, damit sich die Animation richtig anfühlt.
Häufig gestellte Fragen
Ist die Lektion „Übergangsparameter: duration delay easing“ kostenlos?
Ja — der vollständige Text von „Übergangsparameter: duration delay easing“ 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: duration delay easing“?
Passen Sie Übergänge an, indem Sie die Parameter duration, delay und easing übergeben. 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: duration delay easing“?
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
- transition:fade und transition:fly
- Übergangsparameter: duration delay easing
- in: und out: für asymmetrische Übergänge
- transition:draw für SVG-Pfade