Astro View Transitions: Page Transitions แบบ Native

#astro12 เม.ย. 2569

View Transitions คืออะไร

Astro 3.0 แนะนำ View Transitions API ที่ช่วยให้สร้าง smooth page transitions ได้โดยไม่ต้องใช้ JavaScript framework

เปิดใช้ View Transitions

---
// src/layouts/Layout.astro
import { ViewTransitions } from 'astro:transitions';
---

<html>
  <head>
    <ViewTransitions />
  </head>
  <body>
    <slot />
  </body>
</html>

Transition Directives

<!-- Fade transition -->
<main transition:animate="fade">
  <slot />
</main>

<!-- Slide transition -->
<aside transition:animate="slide">
  <nav>...</nav>
</aside>

<!-- Custom name สำหรับ shared element -->
<img
  src={post.image}
  transition:name={`post-image-${post.id}`}
/>

Shared Element Transitions

---
// src/pages/blog/index.astro
const posts = await getCollection('blog');
---

{posts.map(post => (
  <a href={`/blog/${post.slug}`}>
    <img
      src={post.data.image}
      transition:name={`post-${post.slug}-image`}
    />
    <h2 transition:name={`post-${post.slug}-title`}>
      {post.data.title}
    </h2>
  </a>
))}

---
// src/pages/blog/[slug].astro
const { post } = Astro.props;
---

<img
  src={post.data.image}
  transition:name={`post-${post.slug}-image`}
/>
<h1 transition:name={`post-${post.slug}-title`}>
  {post.data.title}
</h1>

Custom Animations

<div transition:animate={{
  forwards: {
    old: [{ opacity: 1 }, { opacity: 0 }],
    new: [{ opacity: 0 }, { opacity: 1 }]
  },
  backwards: {
    old: [{ opacity: 1 }, { opacity: 0 }],
    new: [{ opacity: 0 }, { opacity: 1 }]
  }
}}>
  <slot />
</div>

Lifecycle Events

document.addEventListener('astro:page-load', () => {
  // รันหลังทุก page load
  initializeComponents();
});

document.addEventListener('astro:before-swap', (e) => {
  // รันก่อน swap DOM
});

สรุป

View Transitions ทำให้ Astro site รู้สึกเหมือน SPA โดยไม่ต้องเพิ่ม JavaScript มาก ผู้ใช้ได้ประสบการณ์ที่ smooth ขึ้นมากครับ

← กลับหน้าหลัก