Digital Transformation
CSS View Transition Types (Property types pada @view-transition)
TL;DR: View Transition Types adalah cara memberi nama konteks pada View Transitions API sehingga satu halaman bisa menjalankan animasi transisi berbeda untuk navigasi maju, mundur, atau perpindahan filter. Sebelumnya kita perlu menulis kondisi JavaScript panjang. Sejak 2025, properti types cukup ditulis di CSS at-rule @view-transition.
Apa itu CSS View Transition Types?
Property types diperkenalkan sebagai pelengkap View Transitions API supaya developer bisa membedakan animasi sesuai konteks navigasi. Misalnya, transisi maju ke halaman detail produk bisa pakai slide-from-right, sementara transisi back ke halaman list pakai slide-from-left. Sebelum types, ini hanya bisa dicapai dengan kombinasi event listener navigation dan kelas CSS sementara.
Mekanisme dasarnya sederhana. Pada at-rule @view-transition di CSS, Anda menulis types: forward; atau types: filter-change;. Lalu di selector :active-view-transition-type(forward), Anda menentukan keyframes animasi spesifik. Browser akan otomatis memilih animasi sesuai type yang aktif.
Cara Kerja
| Komponen | Fungsi |
|---|---|
| @view-transition { types } | Nama konteks navigasi yang aktif saat transisi dimulai |
| :active-view-transition-type(X) | Selector yang aktif hanya saat type X dipakai |
| document.startViewTransition({ types }) | Cara memicu transisi dengan type tertentu dari JS |
| navigateEvent.types | Akses type dari Navigation API |
Untuk Next.js App Router, types umumnya dideklarasikan di global CSS, lalu dipicu lewat Navigation API saat link diklik. Kombinasi ini cocok dengan cross-document View Transitions yang sudah saya bahas terpisah.
Kenapa Penting?
Untuk marketer dan developer Indonesia yang membangun toko online atau landing page, types memangkas waktu rilis fitur transisi visual yang biasanya makan dua sampai empat hari kerja menjadi beberapa jam. Lebih dari sekadar estetika, transisi yang konsisten dengan arah navigasi terbukti menurunkan persepsi waktu muat dan menaikkan engagement rate halaman detail produk.
Spesifikasi resmi tersedia di draft CSS Working Group untuk View Transitions Level 2 yang mencakup detail types serta best practice cross-document.
Pertanyaan Umum
Apakah ini sudah didukung semua browser?
Per April 2026, Chrome dan Edge mendukung types secara stabil. Safari mendukung sebagian, Firefox masih di belakang flag eksperimental. Karena itu wajib pakai fallback animasi kelas CSS biasa.
Bisa dipakai untuk modal atau dialog?
Bisa, tapi kurang efisien. Untuk modal, gunakan CSS @starting-style yang lebih ringan. Types lebih cocok untuk navigasi antar halaman atau perpindahan state besar.
Istilah Terkait