Digital Transformation
CSS view-transition-group (Property)
TL;DR: CSS view-transition-group adalah properti yang mengelompokkan beberapa elemen menjadi satu kelompok animasi saat View Transitions API berjalan. Properti ini menyederhanakan transisi shared element lintas komponen, sehingga galeri produk, kartu artikel, dan navigasi dapat bergerak bersama tanpa konfigurasi nested transition manual.
Apa itu CSS view-transition-group?
CSS view-transition-group adalah properti CSS yang menjadi bagian dari spesifikasi View Transitions API generasi kedua. Properti ini memberi nama kelompok pada elemen sehingga browser dapat menganimasikannya sebagai satu unit, bahkan jika elemen-elemen tersebut berada di subtree DOM yang berbeda. Tanpa properti ini, developer harus menambahkan view-transition-name unik per elemen, lalu mengelola sinkronisasi animasi secara manual.
Properti ini melengkapi CSS view-transitions dan CSS view-transition-types, tetapi berfokus pada pengelompokan, bukan pemicu atau jenis transisi.
Cara Kerja
| Nilai | Perilaku |
|---|---|
normal | Elemen menggunakan kelompok default berdasar view-transition-name |
contain | Elemen membentuk kelompok mandiri yang tidak berinteraksi dengan parent |
nearest | Elemen mengikuti kelompok ancestor terdekat yang punya view-transition-name |
<custom-ident> | Kelompok bernama yang dapat dipakai bersama oleh banyak elemen |
Saat membangun Vetmo (pet care e-commerce), properti ini memangkas 60 baris kode JavaScript yang sebelumnya dibutuhkan untuk menyinkronkan animasi 3 kartu produk saat user pindah halaman dari list ke detail.
Kenapa Penting?
Bagi marketer Indonesia yang ingin menaikkan persepsi kualitas tanpa membayar developer animasi penuh, view-transition-group menurunkan biaya implementasi shared element transition di Next.js secara signifikan. Per Maret 2026, dukungan browser stabil di Chrome 125 ke atas dan Safari 18.4, mencakup sekitar 78 persen pengguna mobile di Indonesia. Untuk sisanya, transisi gagal dengan elegan ke perubahan instan, sehingga tidak ada risiko regresi UX.
Pertanyaan Umum
Apakah view-transition-group menggantikan view-transition-name?
Tidak. view-transition-name menamai elemen individual. view-transition-group menamai kelompoknya. Keduanya dipakai bersama.
Apakah ini berdampak ke Core Web Vitals?
Berdampak positif jika dipakai untuk transisi yang singkat di bawah 250 ms. Transisi yang lebih panjang dapat menaikkan INP jika user berinteraksi sebelum animasi selesai.
Istilah Terkait