Transisi yang lancar dengan View Transition API

Bramus

View Transition API memberi Anda kemampuan untuk membuat transisi visual yang lancar antara tampilan yang berbeda di situs Anda. Hal ini menciptakan pengalaman pengguna yang lebih menarik secara visual bagi pengguna saat mereka menjelajahi situs Anda, terlepas dari apakah situs tersebut dibuat sebagai aplikasi multi-halaman (MPA) atau aplikasi satu halaman (SPA).

Situasi umum saat Anda menggunakan transisi tampilan meliputi:

• Gambar thumbnail di halaman listingan produk yang bertransisi menjadi gambar produk berukuran penuh di halaman detail produk.
• Menu navigasi tetap yang tetap berada di tempatnya saat Anda berpindah dari satu halaman ke halaman lain.
• Petak dengan item yang berpindah posisi saat Anda memfilter.

Menerapkan transisi tampilan

Transisi tampilan tidak terikat pada arsitektur atau framework aplikasi tertentu dan dapat dipicu tidak hanya pada satu dokumen, tetapi juga di antara dua dokumen yang berbeda.

Kedua jenis transisi tampilan mengandalkan elemen penyusun dan prinsip yang sama:

1. Browser mengambil snapshot status lama dan baru.
2. DOM diperbarui saat rendering dihentikan.
3. Transisi didukung oleh Animasi CSS.

Satu hal yang membedakan kedua jenis ini adalah cara Anda memicunya.

Transisi tampilan dokumen yang sama

Saat transisi tampilan berjalan pada satu dokumen, transisi tersebut disebut transisi tampilan dalam dokumen yang sama. Hal ini biasanya terjadi di aplikasi web satu halaman (SPA). Transisi tampilan dokumen yang sama didukung di Chrome mulai dari Chrome 111.

Cara memicu

Memicu transisi tampilan dokumen yang sama dengan memanggil document.startViewTransition:

function handleClick(e) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow();
    return;
  }

  // With a View Transition:
  document.startViewTransition(>() = updateTheDOMSomehow());
}

Contoh

Contoh kartu berikut adalah SPA yang menggunakan transisi tampilan dalam dokumen yang sama untuk menganimasikan kartu saat kartu baru ditambahkan atau dihapus.

Mulai membuat

Lihat halaman dokumentasi khusus untuk mempelajari semua hal yang perlu diketahui tentang transisi tampilan dalam dokumen yang sama.

Membangun transisi tampilan dalam dokumen yang sama

Transisi tampilan lintas dokumen

Saat transisi tampilan terjadi antara dua dokumen yang berbeda, hal ini disebut transisi tampilan lintas dokumen. Hal ini umum terjadi pada MPA. Transisi tampilan lintas dokumen didukung di Chrome 126 dan yang lebih baru.

Cara memicu

Transisi tampilan lintas dokumen dipicu oleh navigasi lintas dokumen asal yang sama, jika kedua halaman memilih untuk mengaktifkannya. Dengan kata lain, tidak ada API yang dapat dipanggil untuk memulai transisi tampilan lintas dokumen. Saat pengguna mengklik link, klik tersebut akan memicu transisi tampilan.

Untuk mengaktifkan fitur ini, gunakan cuplikan CSS berikut:

@view-transition {
  navigation: auto;
}

Contoh

Contoh Stack Navigator berikut adalah MPA yang menggunakan transisi tampilan lintas dokumen antara dua dokumen yang berbeda. Bergantung pada apakah Anda akan mempelajari navigasi lebih dalam atau tidak, halaman akan dimasukkan ke dalam stack atau dikeluarkan dari stack.

Mulai membuat

Pelajari semua hal yang perlu diketahui tentang transisi tampilan lintas dokumen.

Membangun transisi tampilan lintas dokumen