View Transitions API: Perubahan Halaman dan Status yang Halus di Browser
Apa yang dilakukan View Transitions API, cara kerja transisi dokumen yang sama dan lintas dokumen, cara mengatur gayanya dengan CSS, dan cara menggunakannya secara bertanggung jawab.
Pengambilan Inti
View Transitions API memungkinkan browser menganimasikan antara dua keadaan halaman. Panggil document.startViewTransition() dengan fungsi yang memperbarui DOM, dan browser mengambil snapshot tampilan lama dan baru serta menganimasikannya, yang dapat Anda gaya dengan elemen semu ::view-transition. Ia berfungsi dalam aplikasi satu halaman dan, di browser pendukung, di seluruh navigasi halaman.
Bagaimana cara kerjanya
MDN menjelaskan document.startViewTransition() sebagai memulai transisi tampilan dokumen yang sama, yang biasa terjadi pada aplikasi satu halaman. Browser menangkap tampilan saat ini, menjalankan pembaruan, menangkap tampilan baru, dan menganimasikannya. Secara default, ini adalah cross-fade; CSS memungkinkan Anda mengubahnya.
Dokumen yang sama dan lintas dokumen
Transisi dokumen yang sama berjalan dalam satu halaman, seperti di SPA, dan Chrome telah mendukungnya sejak Chrome 111. Transisi lintas dokumen bernyawa antara halaman terpisah di situs multi-halaman, yang menurut catatan MDN secara historis tidak mungkin dilakukan; mereka menggunakan acara pertukaran halaman dan pengungkapan halaman serta keikutsertaan di CSS. Dukungan browser berbeda antara keduanya, jadi periksa tabel kompatibilitas saat ini.
Menata transisi
Sebagian besar penyesuaian adalah CSS biasa:
- Berikan elemen nama transisi tampilan untuk menganimasikannya secara terpisah dari halaman lainnya, seperti gambar mini yang berkembang menjadi gambar pahlawan.
- Targetkan ::view-transition-old() dan ::view-transition-new() untuk menyesuaikan animasi.
- Jaga durasinya tetap singkat dan gerakannya bermakna.
- Bungkus animasi khusus dalam pemeriksaan pilihan-gerakan yang dikurangi.
Peningkatan progresif
Selalu periksa dukungan sebelum memanggil API, dan perbarui DOM secara langsung jika tidak ada. Halaman tersebut akan berfungsi sama tanpa animasi. Hindari transisi panjang pada navigasi, yang membuat keseluruhan situs terasa lebih lambat.
Cuplikan Implementasi Produksi
// Same-document transition with a safe fallback
function navigate(updateDom) {
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!document.startViewTransition || reduce) {
updateDom();
return;
}
document.startViewTransition(() => updateDom());
}
/* CSS: animate one element on its own */
.product-image { view-transition-name: product-image; }
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 200ms;
}Kunci Principles untuk Diingat
- startViewTransition() memotret tampilan lama dan baru dan menganimasikannya
- Ada varian dokumen yang sama (SPA) dan lintas dokumen (multi-halaman).
- Gaya dengan elemen semu view-transition-name dan ::view-transition
- Periksa dukungan dan kembali ke pembaruan instan
- Pertahankan transisi yang singkat dan hargai gerakan yang dikurangi
Pertanyaan yang Sering Diajukan
Sumber
- View Transition API — Dokumen Web MDN
- Smooth transitions with the View Transition API — Chrome untuk Pengembang