Svelte memiliki built-in transitions untuk animasi elemen masuk dan keluar DOM.

Transition Dasar

<script>
  import { fade } from "svelte/transition"
  let visible = true
</script>

<button on:click={() => visible = !visible}>Toggle</button>

{#if visible}
  <p transition:fade>Muncul dan hilang dengan fade</p>
{/if}

Transitions Tersedia

• fade — opacity
• fly — bergerak + opacity
• slide — height
• scale — ukuran
• blur — blur effect
• draw — SVG path

Parameter

<p transition:fly={{ y: 200, duration: 500 }}>
  Terbang dari bawah
</p>

In dan Out Terpisah

<p in:fly={{ y: -50 }} out:fade>
  Masuk terbang, keluar fade
</p>