Bagaimana Anda akan meningkatkan aplikasi multi-halaman secara progresif dengan View Transition API?

Pertanyaan dan skenario

Situs ini menggunakan tautan biasa antar halaman dengan asal yang sama (same-origin) yang dirender oleh server. Tujuannya adalah transisi yang mulus jika didukung, dengan navigasi bawaan di tempat lain. Jawaban yang kuat mencakup kedua mekanisme transisi, kegagalan pembaruan, navigasi riwayat, fokus, posisi gulir, dan preferensi reduced-motion.

Hal yang diuji oleh pewawancara

• Apakah kandidat dapat membedakan pembaruan same-document dengan document.startViewTransition() dari navigasi cross-document yang diaktifkan melalui @view-transition?
• Apakah mereka memahami bahwa API ini adalah lapisan penyempurnaan (enhancement layer), bukan pengganti tautan, riwayat, atau perenderan server?
• Bisakah mereka menerapkan deteksi fitur, fallback kegagalan, dan prefers-reduced-motion secara aman?
• Bisakah mereka menguji elemen semu transisi, manajemen fokus, perangkat lambat, dan navigasi yang terinterupsi?

Pertanyaan klarifikasi yang perlu diajukan terlebih dahulu

Konfirmasikan apakah navigasi selalu same-origin, apakah ada iframe yang terlibat, apakah animasi elemen bersama (shared-element motion) diperlukan, dan apakah perute klien (client router) sudah ada. Perjelas peramban target, batas durasi, apakah efek fade sederhana sudah cukup, dan apa yang harus dilakukan produk saat pengguna menonaktifkan gerakan. Transisi cross-document mengharuskan kedua dokumen yang berpartisipasi untuk ikut serta (opt-in) dan peramban mendukung fitur tersebut; ini bukan mekanisme navigasi lintas asal (cross-origin).

Kerangka jawaban 30 detik

Saya akan mempertahankan tautan asli dan navigasi server sebagai garis dasar, lalu menambahkan transisi secara progresif. Untuk pembaruan dalam halaman, deteksi fitur startViewTransition dan bungkus pembaruan DOM; untuk navigasi multi-halaman same-origin, pilih @view-transition pada kedua dokumen. Jika pembaruan gagal, halaman harus tetap dapat digunakan dan kesalahan harus ditangani oleh UI yang ada. Gerakan hanya milik elemen semu transisi, menghormati preferensi reduced-motion, dan tidak pernah mengambil alih semantik fokus, gulir, atau riwayat. Saya akan menguji peramban yang tidak didukung, fallback, mundur/maju, jaringan lambat, dan navigasi yang terinterupsi.

Pembahasan mendalam langkah demi langkah

1. Bangun garis dasar tanpa animasi. Tautan, pengiriman formulir, respons server, dan halaman kesalahan harus berfungsi secara independen; jangan mencegat setiap navigasi hanya untuk meniru animasi.
2. Tangani pembaruan same-document. Untuk pemfilteran atau perubahan status lokal, deteksi document.startViewTransition. Jalankan fungsi pembaruan yang sama secara langsung jika tidak didukung. Jika panggilan balik (callback) gagal, tampilkan status kesalahan yang ada.
3. Tangani navigasi cross-document. Tambahkan @view-transition { navigation: auto; } ke halaman same-origin agar peramban membuat transisi selama navigasi; jangan memanggil startViewTransition. Jika opt-in atau dukungan tidak ada, alihkan ke navigasi normal.
4. Batasi cakupan visual. Tetapkan view-transition-name hanya pada elemen yang memiliki korespondensi stabil. Gunakan ::view-transition-old dan ::view-transition-new untuk fade singkat yang dapat diinterupsi.
5. Lindungi aksesibilitas. Nonaktifkan atau persingkat gerakan di bawah @media (prefers-reduced-motion: reduce). Setelah navigasi, tempatkan fokus pada judul utama halaman baru atau target lain yang diinginkan; tangkapan layar tidak boleh membawa status semantik.
6. Tangani status runtime. Mundur, maju, segarkan, kegagalan jaringan, klik berulang, dan meninggalkan halaman memerlukan hasil normal. Transisi mengubah waktu visual, bukan semantik URL, cache, izin, atau pengiriman.

Contoh jawaban berkualitas tinggi

Saya akan memisahkan garis dasar navigasi bawaan dari lapisan animasi opsional. Untuk pembaruan same-document, setiap peramban memanggil satu fungsi update; peramban yang mendukung memanggil document.startViewTransition(update), sementara yang lain memanggil update secara langsung. Untuk navigasi multi-halaman yang dirender di server, halaman same-origin menyertakan @view-transition { navigation: auto; }; tautan tetap nyata dan dukungan cross-origin tidak diasumsikan.

Lapisan animasi hanya menyediakan kontinuitas visual. Nilai view-transition-name yang stabil mengidentifikasi elemen yang cocok, fade pendek adalah bawaan, dan preferensi reduced-motion menonaktifkannya. Dokumen baru tetap menangani fokus, gulir, dan kesalahan melalui respons normalnya. Pengujian mencakup ketiadaan dukungan, kesalahan callback, mundur/maju, klik berulang, CPU lambat, jaringan lambat, peralihan tab, dan reduced-motion. Referensi utama adalah dokumentasi MDN View Transition API dan startViewTransition, ditambah panduan cross-document dari Chrome for Developers.

Kesalahan umum

• Memanggil startViewTransition untuk navigasi cross-document; metode ini ditujukan untuk pembaruan same-document, sedangkan navigasi ditambah opt-in CSS akan memulai kasus cross-document.
• Memblokir setiap tautan dengan skrip, yang menurunkan aksesibilitas papan ketik, tautan yang disalin, navigasi mundur, dan akses tanpa skrip.
• Mengasumsikan dukungan yang identik di seluruh peramban atau iframe tanpa deteksi fitur dan fallback bawaan.
• Memberikan nama duplikat ke banyak elemen atau membuat animasi cukup panjang hingga menyebabkan konflik cuplikan (snapshot) dan disorientasi.
• Hanya menguji klik maju dan mengabaikan respons yang gagal, mundur/maju, reduced-motion, serta transisi yang terinterupsi.

Pertanyaan lanjutan dan tanggapan

Bagaimana jika callback pembaruan same-document gagal?

Pertahankan pembaruan DOM dan status kesalahan sebagai fungsi yang dapat dieksekusi secara independen. Menangkap pengecualian ViewTransition ditujukan untuk pencatatan log dan menstabilkan status visual; kesalahan bisnis tetap menggunakan UI yang ada, dan pengecualian animasi tidak boleh memblokir pembaruan data.

Bagaimana Anda membuktikan transisi cross-document tidak mengubah semantik navigasi?

Pada peramban yang mendukung dan tidak mendukung, periksa URL, tumpukan riwayat, penyegaran, entri tautan yang disalin, operasi papan ketik, target fokus, dan halaman kesalahan server. Dengan transisi CSS dinonaktifkan, hasil halaman harus identik.

Kapan animasi elemen bersama harus dihindari?

Gunakan fade sederhana atau tanpa gerakan saat identitas tidak stabil, daftar sering disusun ulang, konten memiliki pergerakan intens, atau pengguna memerlukan penentuan lokasi status secara langsung. Pertahankan perilaku bawaan jika keuntungan visual tidak sebanding dengan biaya fokus, performa, dan pemahaman pengguna.