Siap untuk pengujian developer: Transisi tampilan yang dicakup

Bramus

Dipublikasikan: 10 Sep 2025

Transisi tampilan yang tercakup adalah ekstensi yang diusulkan untuk View Transition API yang memungkinkan Anda memulai transisi tampilan pada subtree DOM. Fitur ini siap diuji dari Chrome 140 dengan tanda "Fitur Platform Web Eksperimental" yang diaktifkan di chrome://flags. Kami secara aktif mencari masukan dari developer.

Pengantar singkat

Untuk memulai transisi tampilan yang tercakup, panggil element.startViewTransition() (bukan document.startViewTransition()) pada HTMLElement mana pun dengan contain: layout yang diterapkan padanya.

document.querySelector('nav').startViewTransition({
  callback: () => {
    // … code that manipulates the contents of <nav>
  },
})

Hasilnya adalah transisi tampilan yang dicakup ke subtree HTMLElement yang Anda pilih, dengan pseudo-tree ::view-transition yang dihasilkan disisipkan ke HTMLElement tersebut. HTMLElement bertindak sebagai penampung untuk animasi transisi.

html
  ├─ head
  └─ body
     ├─ nav
     │  ├─ ::view-transition
     │  │  └─ ::view-transition-group(thing)
     │  │     └─ ::view-transition-image-pair(thing)
     │  │        ├─ ::view-transition-old(thing)
     │  │        └─ ::view-transition-new(thing)
     │  └─ ul
     │     ├─ li
     │     ├─ li
     │     └─ li
     └─ main
        └─ …

Transisi yang di-scope memungkinkan beberapa transisi tampilan berjalan secara bersamaan (selama memiliki root transisi yang berbeda). Peristiwa penunjuk dicegah hanya pada subpohon tersebut (yang dapat Anda aktifkan kembali), bukan seluruh dokumen. Selain itu, elemen di luar root transisi memungkinkan untuk digambar di atas transisi tampilan yang tercakup.

Pelajari semua transisi tampilan tercakup dalam penjelasan transisi tampilan tercakup.

Demo

Dalam demo berikut, Anda dapat memindahkan titik di dalam penampungnya dengan mengklik salah satu tombol. Hal ini dapat dilakukan dengan transisi tampilan cakupan dokumen atau transisi tampilan cakupan elemen, sehingga Anda dapat melihat perbedaan perilaku keduanya.

Dengan transisi tampilan yang tercakup, titik tetap dipangkas oleh induknya selama transisi. Selain itu, titik tidak dilukis di atas popover saat ditampilkan.

Kami menerima masukan

Kami tertarik dengan masukan dari komunitas developer web tentang:

• Bentuk Scoped View Transitions API.
• Kasus penggunaan saat fitur berfungsi dengan baik atau tidak berfungsi seperti yang diharapkan.
• Cara menyelesaikan pertanyaan tentang cakupan yang berpartisipasi sendiri.

Sampaikan masukan Anda dengan memberikan komentar pada masalah CSS WG #9890. Pahami masalah umum dan kendala sebelum memberikan masukan.

Jika Anda menemukan bug, laporkan bug Chromium untuk memberi tahu kami.