CSS View Transitions API — page transition แบบ native

View Transitions API ให้สร้าง animated transition ระหว่าง DOM states ได้โดยตรง ไม่ต้องพึ่ง GSAP หรือ animation library สำหรับ basic transition

// Wrap DOM update ใน startViewTransition
document.startViewTransition(() => {
  // DOM mutation จะถูก snapshot ก่อน-หลัง แล้ว animate ให้
  container.innerHTML = newContent;
});

ปรับ animation ด้วย CSS:

/* default transition — cross-fade */
::view-transition-old(root) {
  animation: 200ms ease-out fade-out;
}
::view-transition-new(root) {
  animation: 200ms ease-in fade-in;
}

/* ตั้งชื่อ element เพื่อ animate แยก */
.card {
  view-transition-name: card-hero;  /* ต้องไม่ซ้ำกับ element อื่น */
}

Astro ใช้ transition:name ซึ่ง implement บน View Transitions API:

<img src={hero} transition:name={`hero-${id}`} />

SPA-like navigation ด้วย Navigation API:

// ทำ client-side routing พร้อม transition ใน MPA
navigation.addEventListener('navigate', (event) => {
  event.intercept({
    async handler() {
      const html = await fetch(event.destination.url).then(r => r.text());
      document.startViewTransition(() => updateDOM(html));
    }
  });
});

รองรับ Chrome 111+, Safari 18+ — Firefox ยังไม่รองรับ ควรตรวจ support ก่อน:

if (document.startViewTransition) {
  document.startViewTransition(update);
} else {
  update();
}