Übergänge und Timing
Mit Übergängen zwischen Zuständen animieren
Übergänge und Timing ist eine kostenlose Angular 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 Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.
Zwischen Zuständen animieren
Zustände beschreiben, wo das Element ruht; Übergänge beschreiben, wie es sich zwischen ihnen bewegt. Die Funktion transition verknüpft eine Zustandsänderung mit einer Animation.
Die transition-Funktion
transition übernimmt einen Ausdruck für die Zustandsänderung und einen oder mehrere Animationsschritte.
transition('closed => open', animate('300ms'))Richtungsoperatoren
Verwenden Sie => für eine Richtung und <=> für beide Richtungen.
transition('open <=> closed', animate('250ms ease-in-out'))Die animate-Funktion
animate definiert die Zeitsteuerung: Dauer, optionale Verzögerung und Easing. Das Zeichenkettenformat lautet "duration delay easing".
animate('500ms 100ms ease-out')Einheiten für Zeitangaben
Für Zeitangaben können Sie ms oder s verwenden. Eine Zahl ohne Einheit wird als Millisekunden interpretiert.
animate('0.4s')
animate('400ms')
animate(400)Easing-Funktionen
Easing steuert die Beschleunigung: linear, ease, ease-in, ease-out, ease-in-out oder eine cubic-bezier()-Funktion.
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)')Inline-Zielstile
animate kann ein zweites style-Argument übernehmen, um zu Stilen zu animieren, die nicht an einen benannten Zustand gebunden sind.
transition('* => active', [
animate('300ms', style({ transform: 'scale(1.1)' }))
])Mehrere Schritte
Übergeben Sie ein Array von Schritten, um innerhalb eines einzelnen Übergangs eine Sequenz auszuführen.
transition('closed => open', [
style({ opacity: 0 }),
animate('300ms', style({ opacity: 1 }))
])Platzhalterübergänge
Verwenden Sie *, um Übergänge von jedem beliebigen Zustand oder zu jedem beliebigen Zustand zu erfassen. Das ist praktisch für allgemeine Eintrittseffekte.
transition('* => open', animate('200ms'))Ausgangsstile
Ein allein stehendes style() vor animate() legt den Ausgangspunkt fest. Anschließend animiert Angular zu den Stilen des Zielzustands.
transition(':enter', [
style({ opacity: 0 }),
animate('400ms', style({ opacity: 1 }))
])Bewährte Vorgehensweisen für das Timing
Halten Sie UI-Übergänge für ein reaktionsschnelles Verhalten kurz (150–300 ms). Verwenden Sie längere Dauern für große, bewusst eingesetzte Bewegungen. Wählen Sie das Easing passend zur gewünschten Wirkung.
Kurzer Test
Testen Sie Ihr Verständnis von Übergängen und Zeitsteuerung.
Zusammenfassung
Sie haben gelernt, dass transition Zustandsänderungen mit => oder <=> mit animate-Schritten verknüpft. Die Zeitangabe lautet Dauer Verzögerung Easing, und Sie können style- und animate-Schritte für Sequenzen aneinanderreihen.
Häufig gestellte Fragen
Ist die Lektion „Übergänge und Timing“ kostenlos?
Ja — der vollständige Text von „Übergänge und Timing“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Übergänge und Timing“?
Mit Übergängen zwischen Zuständen animieren Du übst Angular 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 Angular Academy zu starten?
Keine Vorkenntnisse erforderlich. Angular 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 „Übergänge und Timing“?
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 Angular Academy-Lektion Code schreiben und ausführen?
Ja. Jede Angular 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
- Animationsgrundlagen: trigger und state
- Übergänge und Timing
- Animationen beim Ein- und Ausblenden
- Keyframes und gestaffelte Animationen