Bindings, Actions & Transitions

เชื่อม component เข้ากับ DOM และ motion

runes ให้ reactive state; โมดูลนี้ครอบคลุม directive ที่เชื่อม state นั้นเข้ากับ DOM element จริงและกับ motion:

Bindings (bind:) สร้าง link สองทางระหว่าง state กับ DOM property — input update state และ state update input
Attachments และ actions — {@attach} (Svelte 5.29+) run โค้ด setup แบบ imperative บน element หรือ component และ run ใหม่เมื่อ input เปลี่ยน ส่วน use: action คือรูปแบบเดิมสำหรับ library ที่ยังส่ง action มาให้ — escape hatch สำหรับ library ที่ไม่ใช่ Svelte, focus, tooltip และ click-outside
Transitions & animations (transition:, animate:) animate element แบบ declarative ตอนเข้า ออก และเรียงใหม่

โมดูลนี้ครอบคลุมอะไรบ้าง

บทเรียน	สิ่งที่จะได้เรียน
Bindings	`bind:value`, `bind:this`, `bind:group` และ component binding
Actions	attachment (`{@attach}`) ก่อน แล้วค่อย `use:` directive แบบเดิมและ `fromAction`
Transitions & animations	`transition:`/`in:`/`out:` และ `animate:flip`
Forms & inputs	controlled input, validation และการจัดการ submit

flowchart TB
  state["reactive state (runes)"] --> bind["bind: link สองทางกับ DOM property"]
  state --> action["use: setup แบบ imperative บน element"]
  state --> trans["transition: / animate: motion แบบ declarative"]
  bind --> dom["the DOM"]
  action --> dom
  trans --> dom

สามวิธีที่ Svelte เข้าถึง DOM