Svelte Transitions Animations Transition Animate Crossfade

Definisi

Svelte punya transisi bawaan (fade, slide, fly, scale) lewat directive transition:, in:/out:. animate:flip untuk animasi pergerakan list, dan crossfade untuk perpindahan elemen antar container.

Kapan dipakai

Pakai transisi untuk feedback visual saat elemen muncul/hilang ({#if}, {#each}). Hindari berlebihan — transisi lambat mengganggu UX.

Cara kerja

Transisi dasar

svelte

<script>
  import { fade, fly } from 'svelte/transition';
  let show = false;
</script>
 
{#if show}
  <p transition:fade>Halo</p>
{/if}
 
<button on:click={() => show = !show}>Toggle</button>

Fly dengan param

svelte

<p in:fly={{ y: 20, duration: 300 }} out:fade>Konten</p>

Animate list

svelte

<script>
  import { flip } from 'svelte/animate';
</script>
 
{#each items as item (item.id)}
  <li animate:flip>{item.label}</li>
{/each}

Struktur alur

Catatan implementasi

• transition: = in + out; in:/out: untuk arah sendiri.
• Transisi bisa custom lewat fungsi (node, params) => { css, tick }.
• crossfade butuh setup receive/send yang dipasang di elemen terkait.
• Gunakan |local bila transisi hanya saat blok langsung berubah, bukan parent.

Kesalahan umum

• Transisi di luar {#if}/{#each}: tidak jalan karena elemen tidak mount/unmount.
• Durasi terlalu panjang: UX terasa lemot.
• Lupa import: fade dari svelte/transition.
• animate tanpa key unik: flip tidak tahu elemen mana yang pindah.

Referensi terkait

• Svelte Component Syntax: markup, script, style scoped
• CSS Transitions & Animations
• React Concurrent: useTransition, useDeferredValue