javascript / expert
Snippet
Optimierte Listenübergänge mit FLIP
Svelte bietet eine integrierte 'flip' (First, Last, Invert, Play) Animationsdirektive. Sie berechnet das Delta zwischen den Positionen während der Neuordnung und wendet performante CSS-Transformationen an, um Elemente flüssig zu animieren.
snippet.js
javascript
1
2
3
4
5
6
7
8
import { flip } from 'svelte/animate';import { quintOut } from 'svelte/easing';{#each items as item (item.id)}<li animate:flip={{ duration: 500, easing: quintOut }}>{item.label}</li>{/each}
svelte
Erklärung
1
{#each items as item (item.id)}
Ein Keyed Each-Block ist zwingend erforderlich, damit die Animation die Identität der Elemente verfolgen kann.
2
animate:flip={{ ... }}
Wendet die FLIP-Animationslogik auf das Element an.
3
easing: quintOut
Verwendet eine quintische Easing-Funktion für eine natürliche, abbremsende Bewegung.