Einblend-Animationen für neu eingefügte Elemente
Jahrelang brauchte man JavaScript, um ein Element beim Einblenden aus display:none zu animieren. CSS @starting-style löst dieses Problem nativ — und ermöglicht elegante Übergänge für Popover, Dialoge und dynamisch eingefügte Inhalte ohne eine Zeile JavaScript.
Inhaltsverzeichnis
- 1. Das Problem: Warum display:none keine Transition kennt
- 2. @starting-style: Syntax und Grundprinzip
- 3. display:none Übergang mit allow-discrete
- 4. Popover API und @starting-style
- 5. Dialog-Element animieren
- 6. Neu eingefügte DOM-Elemente animieren
- 7. Das ::backdrop und overlay-Layer
- 8. @starting-style vs. JavaScript-Ansätze im Vergleich
- 9. Browser-Support und Progressive Enhancement
- 10. Zusammenfassung
- 11. FAQ