Animationen die wirklich smooth sind
Ruckelnde Animationen, Inhalt der beim Öffnen sofort erscheint oder beim Schließen abrupt verschwindet – das sind die Symptome eines falsch eingesetzten Transitions-Systems. Alpine.js bietet mit x-transition ein durchdachtes Framework für flüssige Enter- und Leave-Animationen, das mit wenig Code professionelle Ergebnisse liefert.
Inhaltsverzeichnis
- 1. Wie x-transition funktioniert: Enter/Leave-Phasen
- 2. x-transition Modifier: duration, delay, opacity, scale
- 3. Custom CSS-Klassen statt Inline-Modifier
- 4. Koordinierte Animationen und Sequenzen
- 5. Modal und Overlay mit korrekter Transition
- 6. Listen-Transitionen: Items animiert ein- und ausblenden
- 7. Performance: Was smooth macht und was nicht
- 8. Accessibility: prefers-reduced-motion beachten