Beberapa waktu lalu saya mengadopsi View Transitions API untuk navigasi cross-document di sebuah situs yang saya bangun. Idenya sederhana: aktifkan transisi halus antar halaman, biar perpindahan terasa lebih mulus tanpa nulis SPA. Cukup satu meta tag opt-in dan sedikit CSS default, katanya. Saya deploy, buka situsnya, dan sekilas terlihat manis.
Lalu saya mulai klik-klik seperti pengunjung sungguhan. Dan di situ mulai terasa ganjil. Setiap navigasi biasa memicu flash tipis, semacam kedipan yang tidak saya minta. Yang paling parah waktu saya pencet tombol Back di browser: halaman yang harusnya balik instan malah ikut ber-animasi, flash, baru menampilkan konten. Paling terasa di halaman kontak, yang seharusnya jadi halaman paling kalem dan cepat di situs itu.
Gejalanya
Bukan error di konsol. Bukan layout yang pecah. Semuanya "berfungsi", tapi terasa salah. Setiap kali saya berpindah halaman, ada momen singkat di mana halaman lama seolah memudar dan halaman baru masuk dengan animasi. Untuk navigasi maju yang disengaja, itu masih bisa saya toleransi walaupun bukan yang saya rancang. Tapi untuk tombol Back, itu benar-benar salah rasa.
Tombol Back seharusnya terasa instan. Pengunjung menekannya karena ingin kembali cepat ke tempat sebelumnya, bukan menonton pertunjukan animasi lagi. Alih-alih restorasi mulus, saya dapat flash penuh setiap kali. Di halaman kontak efeknya paling mencolok, karena halaman itu ringan dan biasanya balik dalam sekejap, jadi animasi yang tidak perlu itu justru terlihat seperti lag.
Investigasinya
Refleks pertama saya menyalahkan JavaScript. Saya cek apakah ada handler navigasi yang saya tulis, apakah ada library routing yang ikut campur. Tidak ada. Situs ini navigasi cross-document biasa, halaman penuh setiap kali, tanpa router SPA.
Lalu saya mulai menelusuri apa yang berubah antara "situs terasa normal" dan "situs flash terus". Jawabannya satu: saya baru saja mengaktifkan View Transitions. Saya buka lagi apa yang saya tambahkan. Ada meta tag opt-in yang saya inject lewat functions.php di tema WordPress ini:
<meta name="view-transition" content="same-origin">Dan menemani meta itu, ada sekitar seratus baris CSS default transisi yang saya tempel ke style.css, isinya keyframe dan selektor ::view-transition-old serta ::view-transition-new untuk fade dan slide.
Begitu saya lihat dua potongan itu berdampingan, teka-tekinya mulai terurai. Meta tag opt-in itu tidak selektif. Dia bilang ke browser: aktifkan cross-document view transition untuk setiap navigasi same-origin. Setiap navigasi. Termasuk restorasi back-forward.
Akar masalahnya
Yang saya salah pahami: meta tag view-transition bukan tombol "aktifkan transisi di tempat yang saya mau". Dia tombol "aktifkan transisi untuk semua". Sekali dipasang, dia melapisi transisi cross-document ke setiap navigasi same-origin, dan CSS default saya yang seratus baris itu menyediakan animasinya. Browser dengan patuh menjalankan animasi itu di mana saja, termasuk saat mengembalikan halaman dari bfcache lewat tombol Back.
Di sinilah letak rasa salahnya. Restorasi back-forward seharusnya cepat dan tanpa drama. Tapi karena opt-in-nya menyeluruh dan CSS-nya tidak saya batasi ke navigasi tertentu, setiap Back memicu animasi lengkap. Bukan bug di browser. Bukan konflik JavaScript. Ini murni saya membiarkan default yang menyeluruh menyala, lalu heran kenapa efeknya muncul di tempat yang tidak saya inginkan.
Yang bikin ini gampang lolos: di navigasi maju yang disengaja, animasinya terlihat "sengaja", jadi saya tidak curiga. Baru waktu menyentuh tombol Back, di mana pengunjung punya ekspektasi kuat soal kecepatan, efek yang sama itu langsung terasa seperti cacat.
Perbaikannya
Saya berhenti sejenak dan bertanya: fitur ini sebenarnya perlu tidak? Jawabannya tidak. Transisi ini murni kosmetik, bukan bagian dari desain yang saya rancang, dan tidak ada satu pun requirement yang memintanya. Jadi saya tidak mengakali CSS-nya biar mengecualikan tombol Back. Saya cabut fiturnya.
Pertama, hapus meta tag opt-in dari functions.php, potongan yang meng-inject ini:
<meta name="view-transition" content="same-origin">Kedua, hapus seluruh CSS transisi terkait dari style.css, sekitar seratus baris keyframe dan selektor ::view-transition:
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.3s;
}Begitu keduanya lenyap, flash-nya langsung hilang. Navigasi biasa balik ke perpindahan halaman polos yang instan, dan tombol Back mengembalikan halaman kontak seketika tanpa animasi apa pun. Persis seperti sebelum saya menyentuh apa-apa.
Checklist saat pakai View Transitions cross-document
- Sadari bahwa meta
view-transitionitu menyeluruh: sekali opt-in, dia kena setiap navigasi same-origin, termasuk restorasi back-forward dari bfcache. - Kalau tombol Back terasa lambat atau flash setelah adopsi View Transitions, curigai dulu opt-in menyeluruh plus CSS default, bukan JavaScript kamu.
- Adopsi transisi cross-document secara sengaja dan scoped: batasi ke navigasi yang memang kamu mau, jangan biarkan default blanket menyala di semua tempat.
- Kalau transisinya cuma kosmetik dan tidak diminta desain, mencabutnya adalah perbaikan yang sah, bukan menyerah.
Pelajaran
View Transitions API itu menggoda karena murah dipasang: satu meta tag, sedikit CSS, langsung terlihat modern. Tapi meta opt-in-nya tidak sopan soal batasan. Dia menyalakan transisi untuk setiap navigasi same-origin, dan itu termasuk momen di mana pengunjung paling tidak mau menunggu: saat menekan tombol Back. Sejak itu saya perlakukan fitur animasi navigasi seperti kontrak, bukan hiasan gratis. Kalau saya memang mau transisi, saya batasi ruang lingkupnya dengan sengaja. Kalau tidak benar-benar butuh, saya tidak menyalakannya sama sekali.