View Transitions API: Page transitions mượt không cần framework

Chuyển trang trên web luôn là trải nghiệm "giật" — flash trắng, content nhảy, không có continuity. Native apps làm tốt hơn nhiều ở khoản này. View Transitions API thay đổi cuộc chơi — smooth transitions giữa các page/state chỉ với browser API.

Cách hoạt động

View Transitions API capture snapshot của DOM trước và sau khi thay đổi, rồi animate giữa 2 states. Cơ chế giống như FLIP animation nhưng browser handle toàn bộ.

// Same-document transition (SPA)
document.startViewTransition(async () => {
  // Update DOM ở đây
  await updateContent(newData);
});

// Với React/Next.js
function handleNavigation(href) {
  if (!document.startViewTransition) {
    router.push(href);
    return;
  }

  document.startViewTransition(() => {
    router.push(href);
  });
}

Browser tự tạo pseudo-elements ::view-transition-old và ::view-transition-new, rồi crossfade giữa chúng. Default animation là fade — nhưng bạn customize được hoàn toàn bằng CSS.

CSS customization

Đây là phần hay nhất — control transitions hoàn toàn bằng CSS:

/* Default crossfade cho toàn page */
::view-transition-old(root) {
  animation: fade-out 0.3s ease-out;
}
::view-transition-new(root) {
  animation: fade-in 0.3s ease-in;
}

/* Shared element transition — hero image morph */
.article-card img {
  view-transition-name: hero-image;
}

.article-detail img.hero {
  view-transition-name: hero-image;
}

/* Customize animation cho hero */
::view-transition-old(hero-image) {
  animation: none;
}
::view-transition-new(hero-image) {
  animation: none;
}
::view-transition-group(hero-image) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

Khi 2 elements trên 2 pages có cùng view-transition-name, browser tự morph giữa chúng — position, size, thậm chí cả content. Giống Magic Move trong Keynote.

Multi-page transitions (MPA)

Với cross-document transitions (MPA — traditional page navigation), chỉ cần thêm CSS:

@view-transition {
  navigation: auto;
}

Browser tự apply transitions khi navigate giữa same-origin pages. Không cần JavaScript.

Thực tế trong Next.js

Với App Router, bạn wrap navigation trong startViewTransition. Vài lưu ý:

• view-transition-name phải unique trên page tại mọi thời điểm.
• Tránh transition trên quá nhiều elements — chọn 2-3 focal elements.
• Luôn check document.startViewTransition tồn tại (progressive enhancement).
• Dùng prefers-reduced-motion để disable cho users cần accessibility.

Browser support

Chrome/Edge đã support đầy đủ. Firefox đang implement. Safari support same-document transitions. Vì API này là progressive enhancement, bạn ship ngay được — browsers không support sẽ navigate bình thường.

Kết

View Transitions API là một trong những web API exciting nhất gần đây. Nó bridge gap giữa web và native app experience mà không cần thêm dependencies. Start với basic crossfade, rồi thêm shared element transitions cho key flows.