View Transition API: Noch nie sahen Seitenübergänge im Web so gut aus

Als Entwickler bauen wir nicht nur Interfaces – wir gestalten Erlebnisse. Mit der View Transition API, inzwischen in allen gängigen Browsern verfügbar, lassen sich flüssige Übergangsanimationen schaffen, die Nutzer begeistern – und das ganz ohne zusätzliche Libraries, allein mit der Power von CSS. Dank der jüngsten Weiterentwicklungen funktioniert die API nicht nur in SPAs, sondern ermöglicht jetzt auch elegante, animierte Übergänge im Multi-Page-Kontext.In diesem Talk werfen wir einen Blick unter die Haube: Wir erklären, wie die API funktioniert, zeigen gängige Anwendungsmuster und verwandeln dadurch eine schlichte Web-Applikation in ein Erlebnis, das Eindruck hinterlässt.

Transcript

1. View-Transition-API Web Page Transitions Have Never Looked This Good Sascha Lehmann @derLehmann_S Consultant
2. Consultant @ Thinktecture AG View Transition API Web Page Transitions Have Never Looked This Good Sascha Lehmann @derLehmann_S https://www.linkedin.com/in/sascha-lehmann sascha.lehmann@thinktecture.com https://www.thinktecture.com/thinktects/sascha-lehmann/    
3. Native Web X-Platform … View Transition API Web Page Transitions Have Never Looked This Good
4. What is the problem? View Transition API Web Page Transitions Have Never Looked This Good
5. Container-Transforms View Transition API Web Page Transitions Have Never Looked This Good
6. View-Transition-API 111+ 18+ 144+ View Transition API Web Page Transitions Have Never Looked This Good
7. Same-Document View Transitions (SPA) Browser-Support Browser Since version Status Chrome 111+ Full support Edge 111+ Full support Firefox 144+ (Okt 2025) Full support Safari 18+ Full support View Transition API Web Page Transitions Have Never Looked This Good
8. Cross-Document View Transitions (MPA) Browser-Support Browser Since version Status Chrome 126+ Full support Edge 126+ Full support Safari 18.2+ Full support Firefox 144+ ◐ Partial support View Transition API Web Page Transitions Have Never Looked This Good
9. Trigger Process of a View-Transition View Transition API Web Page Transitions Have Never Looked This Good
10. What happens in the background? Process of a View-Transition User Perspective Browser Perspective Screenshot (old) Perform DOM changes Live-View (new) Crossfade Old -> New startViewTransition(…) View Transition API Web Page Transitions Have Never Looked This Good
11. Pseudo DOM Tree • New Top-Layer • Default animation: Cross-fade • Elements only exist during the View-Transition Process of a View-Transition View Transition API Web Page Transitions Have Never Looked This Good
12. Pseudoelements ::view-transition Overlay root element that sits above all other DOM elements in order to exclude genetic interference ::view-transition-group Root-Element of the View-Transition ::view-transition-image-pair Container of the before and after snapshot ::view-transition-old/-new Elements that show the before and after DOM states as a Snapshot or live view Process of a View-Transition Each pseudoelement can be styled via CSS View Transition API Web Page Transitions Have Never Looked This Good
13. The snapshots are ”just” images – Not real DOM Elements ATTENTION! Has no effect! View Transition API Web Page Transitions Have Never Looked This Good
14. Beispielanwendung animieren <Demo/>
15. Browser Stylesheet Where does the magic come from? View Transition API Web Page Transitions Have Never Looked This Good
16. What happens in the background „Cutting out“ additional parts User Perspective Browser Perspective Screenshot (old) Perform DOM changes Live-View (new) Crossfade Old -> New startViewTransition(…) View Transition API Web Page Transitions Have Never Looked This Good
17. What happens in the background „Cutting out“ additional parts User Perspective Browser Perspective Perform DOM changes Live-View (new) Crossfade Root - animiere Header separat startViewTransition(…) Screenshot-Header (old) View Transition API Web Page Transitions Have Never Looked This Good
18. DOM-Elements „Cutting out“ additional parts View Transition API Web Page Transitions Have Never Looked This Good
19. Beispielanwendung animieren <Demo/>
20. match-element & view-transition-class New features since 2024/2025 view-transition-name: match-element Generates internal names based of element identity. No manual renaming for lists with multiple entries needed. view-transition-class Multiple elements with different view-transition-name can share the same properties via wildcard selector *.class match-element only works for same document transitions (ID’s can not be transferred between documents) View Transition API Web Page Transitions Have Never Looked This Good
21. Conditional animations based on navigation context View Transition Types SPA – pass types at transition start MPA – types via CSS: CSS – read types with :active-view-transition-type(): View Transition API Web Page Transitions Have Never Looked This Good
22. Chrome 140–142 (some behind flags) Experimental features Nested View Transition Groups Hierarchical pseudo-tree instead of flat structure. Solves problems with clipping and overflow Scoped View Transitions Transitions on DOM-subtrees instead of whole document. Multiple scoped transitions can run simultaneously • Improved inheritance ::view-transition-image-pair, -old, -new iinherit animation properties from parent group • ViewTransition.waitUntil (announced) Prevents automatic transition end – e.g. wait for fetch() result before animation ends View Transition API Web Page Transitions Have Never Looked This Good
23. Base config – since Angular 17 Angular-Integration Standalone (app.config.ts): NgModule-Variante: View-Transitions need to be defined in global styles! View encapsulation prevents component-based styling View Transition API Web Page Transitions Have Never Looked This Good
24. onViewTransitionCreated & Service/Directive Pattern Angular-Integration View Transition API Web Page Transitions Have Never Looked This Good
25. Where are we now – where do we go? Spec-Level & Interop-Roadmap Spec Umfasst Status Level 1 Same-Document VT, startViewTransition(), view-transition-name, Pseudo-Elements Baseline Newly Available (Okt 2025) Level 2 Cross-Document VT, @view-transition, Types, view-transition-class, pageswap/pagereveal Events Chrome/Edge/Safari | Firefox partial ◐ Experimental Scoped VT, Nested Groups, document.activeViewTransition, waitUntil Chrome 140–142 (some behind flags) Interop-Roadmap: Jahr Fokus Ergebnis Interop 2025 Same-Document VT, view-transition-class, match-element, :active-view-transition Baseline Newly Available Interop 2026 Cross-Document VT, blocking="render", :active-view-transition-type() In Arbeit – alle Browser committed View Transition API Web Page Transitions Have Never Looked This Good
26. Sascha Lehmann sascha.lehmann@thinktecture.com Thank you!
27. Demos / Repo Links • https://codepen.io/argyleink/pen/VwBKjwj • https://codepen.io/bramus/full/xxmozvN • https://developer.chrome.com/blog/scoped-view-transitions-feedback