Transitions & Animations

transition animate element ตอนเข้าและออก

เมื่อ element ถูกเพิ่มเข้าหรือลบออกจาก DOM (ผ่าน {#if}, {#each} ฯลฯ) transition animate การเปลี่ยนแปลงนั้น ใช้ด้วย transition: directive โดยใช้ตัวที่มีมาให้จาก svelte/transition:

<script>
  import { fade } from 'svelte/transition';
  let visible = $state(true);
</script>

<button onclick={() => (visible = !visible)}>toggle</button>

{#if visible}
  <p transition:fade>fade in ตอนเพิ่ม, fade out ตอนลบ</p>
{/if}

transition: ใช้กับ ทั้ง เข้าและออก เมื่อต้องการ animation ต่างกันสำหรับแต่ละอัน ใช้ in: และ out: แยกกัน:

<script>
  import { fly, fade } from 'svelte/transition';
</script>

{#if visible}
  <div in:fly={{ y: 20 }} out:fade>fly in, fade out</div>
{/if}

ตัวที่มีมาให้รวมถึง fade, fly, slide, scale, blur และ draw (สำหรับ SVG) แต่ละอันรับพารามิเตอร์ — duration, delay, easing และ option เฉพาะ transition เช่น x/y ของ fly:

<p transition:fly={{ y: 50, duration: 400, delay: 100 }}>…</p>

flowchart LR
  add["element ถูกเพิ่มเข้า DOM"] --> intro["in: / transition: เล่น intro"]
  remove["element ถูกลบ"] --> outro["out: / transition: เล่น outro"]
  outro --> gone["element ออกไปหลัง animation"]

transition ตอนเข้าและออก

animate: สำหรับเรียง list ใหม่

transition จัดการ add/remove แต่ไม่จัดการ การเคลื่อนที่ เมื่อ item ใน keyed {#each} เรียงใหม่ animate: directive เลื่อน item ไปตำแหน่งใหม่อย่างลื่น ตัวที่มีมาให้คือ flip (First-Last-Invert-Play) จาก svelte/animate ทำสิ่งนี้พอดี:

<script>
  import { flip } from 'svelte/animate';
  let items = $state([1, 2, 3, 4]);
  function shuffle() { items = items.toSorted(() => Math.random() - 0.5); }
</script>

<button onclick={shuffle}>shuffle</button>

{#each items as item (item)}
  <div animate:flip={{ duration: 300 }}>{item}</div>
{/each}

animate: ต้องการ each block ที่ keyed — key (item) คือวิธีที่ Svelte รู้ว่า element ไหนย้ายไปไหน รวม animate:flip กับ transition: บน list เดียวกันเพื่อ animate การเพิ่ม ลบ และเรียงใหม่พร้อมกัน