View Transition API adalah terobosan baru untuk pengembangan web. Baik situs Anda berupa satu atau beberapa halaman, API yang andal ini memungkinkan Anda membuat transisi yang lancar antar-tampilan, sehingga menghasilkan pengalaman seperti native yang memikat pengguna. Saat ini tersedia di Chrome, dengan transisi tampilan dokumen yang sama akan segera tersedia di Safari.
Dengan semakin banyaknya orang yang mulai mengamati View Transition API, kini saatnya untuk menyanggah beberapa kesalahpahaman.
Kesalahpahaman 1: View Transition API mengambil screenshot
Saat menjalankan transisi tampilan, API akan mengambil snapshot dari status lama dan baru konten. Snapshot ini kemudian dianimasikan, seperti yang dijelaskan di bagian "Cara kerja transisi ini" dalam dokumentasi.
Meskipun Anda dapat menggunakan istilah screenshot untuk snapshot lama, snapshot baru bukanlah screenshot, melainkan representasi langsung dari node. Anggap saja sebagai elemen yang diganti.
::view-transition
└─ ::view-transition-group(root)
└─ ::view-transition-image-pair(root)
├─ ::view-transition-old(root) 👈 Screenshot
└─ ::view-transition-new(root) 👈 Live representation
Berkat aspek live ini, demo seperti ini berhasil: video yang diambil dari snapshot baru akan terus diputar saat transisi tampilan berlangsung.
Logika dan CSS yang digunakan untuk ini mendetail dalam dokumentasi kami.
Kesalahpahaman 2: Mengambil lebih dari satu elemen menyebabkan beberapa transisi tampilan berjalan
Saat Anda mengambil beberapa elemen, proses pembuatan snapshot akan merekam semua status lama dan baru. Saat Anda mengambil .box selain elemen :root, Anda akan mendapatkan pohon semu ini:
::view-transition
└─ ::view-transition-group(root)
| └─ ::view-transition-image-pair(root)
| ├─ ::view-transition-old(root)
| └─ ::view-transition-new(root)
└─ ::view-transition-group(box)
└─ ::view-transition-image-pair(box)
├─ ::view-transition-old(box)
└─ ::view-transition-new(box)
Meskipun hierarki ini berisi beberapa pasangan snapshot, hanya satu transisi tampilan yang akan dijalankan.
Saat ini, Chrome dibatasi untuk menjalankan satu transisi tampilan per dokumen secara bersamaan. Coba klik dengan cepat di demo ini untuk memulai transisi tampilan baru. Anda akan melihat transisi yang sedang berlangsung melewati bagian akhir saat transisi baru dimulai.
Kesalahpahaman 3: Anda tidak dapat menerapkan transisi tampilan karena dukungan browser
Banyak developer khawatir mereka tidak dapat menerapkan transisi tampilan karena hanya didukung di Chrome. Kabar baiknya, Safari sedang mengerjakannya dan akan menyertakannya dalam rilis Safari 18 mendatang.
Namun, jangan biarkan dukungan browser yang tidak stabil mencegah Anda menerapkan transisi tampilan saat ini. Transisi tampilan adalah materi yang tepat untuk progressive enhancement. Dokumentasi asli membagikan metode untuk menambahkan metodologi ini ke kode Anda.
function handleClick(e) {
// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
updateTheDOMSomehow();
return;
}
// With a View Transition:
document.startViewTransition(() => updateTheDOMSomehow());
}
Jika browser Anda mendukung transisi tampilan dokumen yang sama, Anda akan mendapatkan versi animasi yang diperkaya. Jika tidak, Anda akan mendapatkan pengalaman saat ini. Seiring waktu, karena semakin banyak browser yang mendukung transisi tampilan, semakin banyak pengguna yang akan merasakan versi yang diperkaya ini, semuanya secara otomatis.
Hal yang sama berlaku untuk transisi tampilan lintas dokumen. Browser yang tidak mendukungnya akan mengabaikan keikutsertaan CSS saat mengurai stylesheet.
Pendekatan ini berhasil diterapkan di e-commerce, seperti yang diuraikan dalam studi kasus ini
Kesalahpahaman 4: Transisi tampilan merusak rendering inkremental
Ada klaim bahwa transisi tampilan merusak rendering inkremental. Jawaban ini tidak benar: Transisi tampilan lintas dokumen ditentukan agar tidak merusak aspek dasar web ini.
Browser mulai merender halaman saat memiliki konten yang "cukup". Langkah ini–di sebagian besar browser–setelah memuat semua stylesheet di <head>, menguraikan semua JavaScript yang memblokir perenderan di <head>, dan memuat markup yang memadai. Transisi tampilan lintas dokumen tidak mengubah hal ini: konten yang diperlukan untuk First Contentful Paint tidak diubah. Setelah render pertama ini, browser dapat–dan akan–secara bertahap merender konten yang baru diterima.
Anda dapat memilih untuk memblokir rendering hingga elemen tertentu ada di DOM. Hal ini sangat praktis jika Anda ingin memastikan bahwa elemen yang berpartisipasi dalam transisi tampilan sudah ada di halaman baru.
Untuk melakukannya, gunakan tag link ini:
<link rel="expect" blocking="render" href="#elementId">
Ini akan menggantikan heuristik browser yang digunakan untuk memutuskan kapan harus melakukan render pertamanya: render pertama ditunda hingga elemen yang ditentukan ada di hierarki DOM.
Pemblokiran manual ini memiliki beberapa pengamanan bawaan. Misalnya, saat tag </html> penutup terlihat tetapi elemen pemblokiran tidak terlihat, rendering tidak akan diblokir lagi. Selain itu, Anda dapat menambahkan logika waktu tunggu sendiri yang menghapus atribut pemblokiran kapan saja.
Jelas bahwa pemblokiran render harus digunakan dengan hati-hati. Dampak dari rendering pemblokiran perlu dievaluasi berdasarkan kasus per kasus. Secara default, hindari penggunaan blocking=render kecuali jika Anda dapat secara aktif mengukur dan mengukur dampaknya terhadap pengguna, dengan mengukur dampaknya terhadap metrik performa.
Kesalahpahaman 5: Proses pembuatan snapshot lambat atau mahal
Sementara View Transition API menyiapkan tampilan baru dan mendapatkan snapshot-nya, tampilan lama tetap terlihat oleh pengguna. Karena itu, pengguna dapat melihat laman lama sedikit lebih lama daripada tanpa transisi tampilan. Penundaan ini dapat diabaikan, pada kenyataannya hanya beberapa frame. Di Chrome, misalnya, dampak pageswap adalah maksimal dua frame lama: Satu untuk menjalankan logika dan satu frame tambahan untuk memastikan snapshot telah digabungkan dan di-cache.
Selain itu, data untuk snapshot diambil langsung dari compositor, sehingga tidak ada tata letak tambahan atau langkah-langkah penggambaran ulang yang perlu dilakukan untuk mendapatkan data snapshot.
Kesalahpahaman Bonus: Ini adalah View Transitions API
Saat membahas transisi tampilan, orang sering merujuk pada "View Transitions API". Ini salah. API ini disebut "View Transition API"–perhatikan "Transition" tunggalnya.
Kesalahpahaman tersebut berasal dari beberapa artikel, termasuk dokumen kami sendiri tentang DCC, yang menggunakan istilah yang salah.
Trik untuk mengingat nama yang benar adalah Anda menggunakan (satu) View Transition API untuk membuat (satu atau beberapa) transisi tampilan.