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. View Transition API Web Page Transitions Have Never Looked This Good Sascha Lehmann Consultant @ Thinktecture AG  @derLehmann_S  https://www.linkedin.com/in/sascha-lehmann  sascha.lehmann@thinktecture.com  https://www.thinktecture.com/thinktects/sascha-lehmann/
3. View Transition API Web Page Transitions Have Never Looked This Good Native Web … X-Platform
4. View Transition API Web Page Transitions Have Never Looked This Good What is the problem?
5. View Transition API Web Page Transitions Have Never Looked This Good Container-Transforms
6. View Transition API Web Page Transitions Have Never Looked This Good View-Transition-API 111+ 18+ 144+
7. View Transition API Web Page Transitions Have Never Looked This Good Browser-Support Same-Document View Transitions (SPA) Browser Since version Status Chrome 111+ Full support Edge 111+ Full support Firefox 144+ (Okt 2025) Full support Safari 18+ Full support
8. View Transition API Web Page Transitions Have Never Looked This Good Browser-Support Cross-Document View Transitions (MPA) Browser Since version Status Chrome 126+ Full support Edge 126+ Full support Safari 18.2+ Full support Firefox 144+ ◐ Partial support
9. View Transition API Web Page Transitions Have Never Looked This Good Process of a View-Transition Trigger
10. View Transition API Web Page Transitions Have Never Looked This Good Process of a View-Transition What happens in the background? User Perspective Browser Perspective Crossfade Old -> New startViewTransition(…) Screenshot (old) Perform DOM changes Live-View (new)
11. View Transition API Web Page Transitions Have Never Looked This Good Process of a View-Transition Pseudo DOM Tree • New Top-Layer • Default animation: Cross-fade • Elements only exist during the View-Transition
12. View Transition API Web Page Transitions Have Never Looked This Good Process of a View-Transition Pseudoelements ::view-transition ::view-transition-image-pair Overlay root element that sits above all other DOM elements in order to exclude genetic interference Container of the before and after snapshot ::view-transition-group Root-Element of the View-Transition ::view-transition-old/-new Elements that show the before and after DOM states as a Snapshot or live view Each pseudoelement can be styled via CSS
13. View Transition API Web Page Transitions Have Never Looked This Good ATTENTION! The snapshots are ”just” images – Not real DOM Elements Has no effect!
14. Beispielanwendung animieren <Demo/>
15. View Transition API Web Page Transitions Have Never Looked This Good Where does the magic come from? Browser Stylesheet
16. View Transition API Web Page Transitions Have Never Looked This Good „Cutting out“ additional parts What happens in the background User Perspective Browser Perspective Crossfade Old -> New startViewTransition(…) Screenshot (old) Perform DOM changes Live-View (new)
17. View Transition API Web Page Transitions Have Never Looked This Good „Cutting out“ additional parts What happens in the background User Perspective Crossfade Root animiere Header separat startViewTransition(…) Browser Perspective Perform DOM changes Screenshot-Header (old) Live-View (new)
18. View Transition API Web Page Transitions Have Never Looked This Good „Cutting out“ additional parts DOM-Elements
19. Beispielanwendung animieren <Demo/>
20. View Transition API Web Page Transitions Have Never Looked This Good New features since 2024/2025 match-element & view-transition-class view-transition-name: match-element view-transition-class Generates internal names based of element identity. No manual renaming for lists with multiple entries needed. 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)
21. View Transition API Web Page Transitions Have Never Looked This Good View Transition Types Conditional animations based on navigation context SPA – pass types at transition start CSS – read types with :active-view-transition-type(): MPA – types via CSS:
22. View Transition API Web Page Transitions Have Never Looked This Good Experimental features Chrome 140–142 (some behind flags) Nested View Transition Groups Scoped View Transitions Hierarchical pseudo-tree instead of flat structure. Solves problems with clipping and overflow 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
23. View Transition API Web Page Transitions Have Never Looked This Good Angular-Integration Base config – since Angular 17 Standalone (app.config.ts): NgModule-Variante: View-Transitions need to be defined in global styles! View encapsulation prevents component-based styling
24. View Transition API Web Page Transitions Have Never Looked This Good Angular-Integration onViewTransitionCreated & Service/Directive Pattern
25. View Transition API Web Page Transitions Have Never Looked This Good Spec-Level & Interop-Roadmap Where are we now – where do we go? 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 Experimental Scoped VT, Nested Groups, document.activeViewTransition, waitUntil Chrome 140–142 (some behind flags) | Firefox partial ◐ 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
26. Thank you! Sascha Lehmann sascha.lehmann@thinktecture.com
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