Panduan Lengkap View Transitions API untuk SPA Tanpa Framework Kompleks

Menghilangkan Rasa ‘Kaku’ Pada Navigasi Web

Sebelum View Transitions API distandarisasi, membuat animasi transisi antar halaman (seperti zoom-in thumbnail artikel ke halaman detail) memerlukan framework Single Page Application yang rumit, routing terpusat, dan manipulasi DOM manual yang rentan memory leak.

Sekarang, browser menyediakan antarmuka native document.startViewTransition().

// Navigasi dengan animasi native browser
function navigateToArticle(url) {
  if (!document.startViewTransition) {
    window.location.href = url;
    return;
  }

  document.startViewTransition(async () => {
    const response = await fetch(url);
    const html = await response.text();
    const newDoc = new DOMParser().parseFromString(html, 'text/html');
    document.querySelector('#main-content').innerHTML = newDoc.querySelector('#main-content').innerHTML;
  });
}

/* Menghubungkan elemen asal dan elemen tujuan */
.article-hero-image {
  view-transition-name: active-article-hero;
}

Browser secara otomatis menangkap screenshot dari state lama, state baru, lalu menjalankan transisi morphing dengan performa 60 FPS GPU-accelerated!