View Transition API memberi Anda kemampuan untuk membuat transisi visual yang lancar di antara berbagai tampilan di situs. Hal ini menciptakan pengalaman pengguna yang lebih menarik secara visual bagi pengguna saat mereka menavigasi situs Anda, terlepas dari apakah situs tersebut dibuat sebagai aplikasi multi-halaman (MPA) atau aplikasi web satu halaman (SPA).
Situasi umum saat Anda akan menggunakan transisi tampilan meliputi:
- Gambar thumbnail di halaman listingan produk yang bertransisi menjadi gambar produk ukuran penuh di halaman detail produk.
- Bilah navigasi tetap yang tetap berada di tempatnya saat Anda menavigasi dari satu halaman ke halaman lainnya.
- Petak dengan item yang bergerak posisi saat Anda memfilter.
Mengimplementasikan transisi tampilan
Transisi tampilan tidak terikat dengan arsitektur aplikasi atau framework tertentu dan dapat dipicu tidak hanya pada satu dokumen, juga di antara dua dokumen yang berbeda.
Kedua jenis transisi tampilan mengandalkan elemen penyusun dan prinsip yang sama:
- Browser mengambil snapshot status lama dan baru.
- DOM diperbarui saat rendering disembunyikan.
- Transisi didukung oleh Animasi CSS.
Satu hal yang berbeda di antara kedua jenis tersebut adalah bagaimana Anda memicunya.
Transisi tampilan dokumen yang sama
Jika transisi tampilan berjalan pada satu dokumen, transisi ini disebut transisi tampilan dokumen yang sama. Hal ini biasanya terjadi dalam aplikasi web satu halaman (SPA). Transisi tampilan dokumen yang sama didukung di Chrome dari Chrome 111.
Cara memicu
Picu 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 dokumen yang sama untuk menganimasikan kartu saat kartu baru ditambahkan atau dihapus.
Mulai membuat
Lihat halaman dokumentasi khusus untuk mempelajari semua yang perlu diketahui tentang transisi tampilan dokumen yang sama.
Membuat transisi tampilan dokumen yang sama
Transisi tampilan lintas dokumen
Saat terjadi transisi tampilan di antara dua dokumen yang berbeda, hal ini disebut transisi tampilan lintas dokumen. Hal ini umum untuk MPA. Transisi tampilan lintas dokumen didukung di Chrome 126 dan yang lebih baru.
Dukungan Browser
Cara memicu
Transisi tampilan lintas dokumen dipicu oleh navigasi lintas dokumen asal yang sama, jika kedua halaman diikutsertakan. 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 ikut serta, 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 melakukan navigasi lebih dalam atau tidak, halaman akan didorong ke tumpukan atau muncul.
Mulai membuat
Pelajari semua yang perlu diketahui tentang transisi tampilan lintas dokumen.