seitenübergreifende Übergänge nativ im Browser
Die View Transitions API bringt das, was früher nur SPAs mit aufwendigen Frameworks erreichten, als native Browser-Funktion: nahtlose Animationen beim Seitenwechsel — mit view-transition-name für shared elements, CSS-Pseudoelementen für volle Stilkontrolle und Cross-Document-Unterstützung für Multi-Page-Apps.
Inhaltsverzeichnis
- 1. Was die View Transitions API löst
- 2. Grundprinzip: Snapshot → DOM-Änderung → Animation
- 3. ::view-transition-Pseudoelemente und CSS-Kontrolle
- 4. view-transition-name: Shared Elements animieren
- 5. SPA-Integration: document.startViewTransition()
- 6. MPA Cross-Document Transitions
- 7. Navigation API und Transition-Typen
- 8. MPA vs. SPA View Transitions im Vergleich
- 9. Accessibility und prefers-reduced-motion
- 10. Zusammenfassung