Dipublikasikan: 27 Mar 2026
Chrome 147 memperkenalkan transisi tampilan yang tercakup dalam elemen, sebuah fitur yang memungkinkan Anda memulai transisi tampilan pada subtree DOM dengan memanggil Element.startViewTransition().
Fitur ini memungkinkan beberapa transisi tampilan berjalan secara bersamaan, memungkinkan Anda menyusun transisi tampilan yang sedang berlangsung, dan menyelesaikan masalah pelapisan dengan konten position: fixed—sekaligus menjaga interaksi halaman lainnya.
Apa saja yang berubah?
Sejak kami mengumumkan fitur ini siap untuk pengujian developer di Chrome 140, kami berkolaborasi dengan komunitas dan Kelompok Kerja CSS untuk memfinalisasi detailnya, terutama terkait perilaku default:
- Akar cakupan berpartisipasi sendiri secara default.
- Transisi tampilan yang tercakup secara otomatis berisi pseudo bertingkatnya dengan menggunakan grup transisi tampilan bertingkat.
- Pseudo
::view-transition-group-children()dalam transisi tampilan yang tercakup otomatis memangkas kontennya jika root cakupan memangkas overflow-nya. - Transisi tampilan cakupan elemen secara otomatis menerapkan
contain: layoutdanview-transition-scope: allke root cakupan selama transisi.
Setelah update ini, transisi tampilan yang tercakup elemen tersedia di Chrome Stabil mulai dari versi 147.
Demo
Mengacak daftar
Demo ini memungkinkan Anda mengacak item di setiap daftar. Anda juga dapat menukar posisi daftar dengan memilih tombol di tengah.
Demo Langsung
Rekaman Demo
Karena transisi tampilan cakupan elemen digunakan, kedua daftar dapat menjalankan transisi tampilan pengacakan secara bersamaan. Anda juga dapat memulai transisi tampilan luar, yang menukar posisi daftar, sementara item daftar masih diatur ulang.
Perjalanan saya ke Patagonia
Demo "My Patagonia Trip" menunjukkan transisi tampilan yang tercakup dalam elemen. Demo ini dibuat berdasarkan video kampanye "Web UX, re-imagined".
Gunakan dropdown untuk memfilter item petak. Gunakan tombol Tambahkan pada setiap item petak untuk menambahkannya ke daftar item yang dipilih, yang muncul di sidebar.
Demo Langsung
Untuk melihat demo lengkap, buka "My Patagonia Trip" di tab terpisah.
Rekaman Demo
Demo ini menggunakan transisi tampilan cakupan elemen di tiga tempat:
- Petak item saat memfilter item.
- Item petak saat menambahkannya ke daftar item yang dipilih.
- Sidebar yang menampilkan daftar item yang dipilih.
Baca panduan
Untuk mempelajari semua transisi tampilan yang di-scope elemen, baca panduannya. Bagian ini menunjukkan cara menerapkan transisi tampilan yang tercakup elemen, menjelaskan detail tambahan, dan menyertakan lebih banyak demo.