Directiva animate: în Svelte în Svelte & SvelteKit

Animații de reordonare fluide cu FLIP

Când o listă de elemente cu cheie unică este sortată sau filtrată, elementele sar de obicei instantaneu pe noile poziții. Adăugarea directivei animate:flip din pachetul svelte/animate transformă reordonarea într-o glisare vizuală elegantă pe ecran.

<script>
  import { flip } from 'svelte/animate';
  let elemente = $state(['A', 'B', 'C', 'D']);
</script>

{#each elemente as item (item)}
  <div animate:flip={{ duration: 300 }} class="card">
    {item}
  </div>
{/each}