javascript / expert
Snippet
Native View Transitions bei Svelte Status-Updates
Die View Transition API ermöglicht nahtlose Animationen zwischen DOM-Zuständen. Durch das Einschließen eines Svelte-Status-Updates in startViewTransition erstellt der Browser automatisch Schnappschüsse und blendet zwischen den alten und neuen Komponenten-Layouts über.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>let view = $state('list');function navigate(nextView) {if (!document.startViewTransition) {view = nextView;return;}document.startViewTransition(() => {view = nextView;});}</script><button onclick={() => navigate('grid')}>Switch View</button>
svelte
Erklärung
1
if (!document.startViewTransition)
Feature-Erkennung für Progressive Enhancement in nicht unterstützten Browsern.
2
document.startViewTransition(() => { view = nextView; });
Signalisiert dem Browser, den Übergang zu animieren, während das Status-Update den DOM verändert.
3
view = nextView;
Das eigentliche reaktive Status-Update, das die gerenderte Komponente oder das Layout ändert.