Yang baru dalam transisi tampilan (update 2025)

Bramus

Dipublikasikan: 8 Oktober 2025

Banyak hal telah berubah sejak kami mengirimkan transisi tampilan dalam dokumen yang sama pada tahun 2023.

Pada tahun 2024, kami meluncurkan transisi tampilan lintas dokumen, menambahkan penyempurnaan seperti view-transition-class dan jenis transisi tampilan, serta menyambut Safari yang menambahkan dukungan untuk transisi tampilan.

Postingan ini memberikan ringkasan tentang perubahan transisi tampilan pada tahun 2025.

Dukungan browser dan framework yang lebih baik

Transisi tampilan dalam dokumen yang sama akan menjadi Tersedia untuk Baseline

Area fokus Interop 2025 adalah View Transition API, khususnya transisi tampilan dalam dokumen yang sama dengan document.startViewTransition(updateCallback), view-transition-class, penamaan otomatis dengan view-transition-name: match-element, dan pemilih CSS :active-view-transition.

Firefox bermaksud menyertakan fitur ini dalam rilis Firefox 144 mendatang yang akan menjadi stabil pada 14 Oktober 2025. Dengan demikian, fitur ini akan tersedia di Baseline yang Baru.

Dukungan untuk View Transition API kini ada di inti React

Sepanjang tahun ini, tim React telah berupaya menambahkan transisi tampilan ke inti React. Mereka mengumumkan react@experimental dukungan kembali pada bulan April dan minggu ini, di React Conf, mereka memindahkan dukungan tersebut ke react@canary yang berarti desainnya hampir final.

function Child() {
  return (
    <ViewTransition>
      <div>Hi</div>
    </ViewTransition>
  );
}

function Parent() {
  const [show, setShow] = useState();
  if (show) {
    return <Child />;
  }
  return null;
}

Anda dapat melihat dokumen <ViewTransition>React untuk mengetahui semua detailnya atau menonton video presentasi Aurora Scharff ini untuk mendapatkan pengantar yang baik tentang topik ini.

Fitur yang baru diluncurkan

Elemen yang diberi nama otomatis dengan view-transition-name: match-element

Untuk menandai elemen yang akan diambil screenshot-nya sebagai bagian dari transisi tampilan, Anda memberinya view-transition-name. Hal ini penting untuk transisi tampilan, karena memungkinkan fitur seperti transisi antara dua elemen yang berbeda. Setiap elemen memiliki nilai view-transition-name yang sama di setiap sisi transisi, dan transisi tampilan akan menanganinya untuk Anda.

Namun, penamaan elemen secara unik dapat menjadi rumit saat mentransisikan banyak elemen yang sebenarnya tidak berubah. Jika Anda memiliki 100 elemen yang bergerak dalam daftar, Anda harus membuat 100 nama unik.

Berkat match-element, Anda tidak perlu melakukan semua itu. Saat menggunakan ini sebagai nilai untuk view-transition-name, browser akan membuat view-transition-name internal untuk setiap elemen yang cocok berdasarkan identitas elemen.

Dalam demo berikut, pendekatan ini digunakan. Setiap kartu dalam baris mendapatkan view-transition-name yang dibuat secara otomatis.

.card {
  view-transition-name: match-element;
  view-transition-class: card;
}

#targeted-card {
  view-transition-name: targeted-card;
  view-transition-class: none;
}

Satu kartu yang masuk atau keluar akan mendapatkan nama eksplisit. Nama tersebut digunakan dalam CSS untuk melampirkan animasi tertentu ke snapshot tersebut. Snapshot semua kartu lainnya diberi gaya menggunakan view-transition-class yang terkait dengannya.

/* Style all pseudos with the class .card */
::view-transition-group(*.card) {
  animation-timing-function: var(--bounce-easing);
  animation-duration: 0.5s;
}

/* Style only the targeted-card's pseudos */
::view-transition-old(targeted-card):only-child {
  animation: animate-out ease-out 0.5s forwards;
}
::view-transition-new(targeted-card):only-child {
  animation: animate-in ease-in 0.25s forwards;
}

DevTools kini menampilkan aturan yang menargetkan pseudo yang menggunakan view-transition-class

Untuk men-debug transisi tampilan, Anda dapat menggunakan panel Animasi dari DevTools untuk menjeda semua animasi. Dengan begitu, Anda memiliki waktu untuk memeriksa elemen semu tanpa harus khawatir transisi tampilan akan mencapai status akhirnya. Anda bahkan dapat menggeser linimasa animasi secara manual untuk melihat cara transisi berjalan.

Sebelumnya, saat memeriksa salah satu elemen semu ::view-transition-*, Chrome DevTools tidak mengekspos aturan yang ditargetkan ke elemen semu menggunakan view-transition-class yang ditetapkan. Hal ini berubah di Chrome 139, yang menambahkan fungsi tersebut.

Grup transisi tampilan bertingkat tersedia mulai Chrome 140

Saat transisi tampilan berjalan, transisi akan merender elemen yang diambil dalam pohon elemen semu. Secara default, hierarki yang dihasilkan adalah "datar". Artinya, hierarki asli di DOM akan hilang, dan semua grup transisi tampilan yang diambil menjadi elemen saudara di bawah satu elemen semu ::view-transition.

Pendekatan hierarki datar ini sudah cukup untuk banyak kasus penggunaan, tetapi menjadi bermasalah saat efek visual seperti pemangkasan atau transformasi 3D digunakan. Tindakan ini memerlukan beberapa hierarki dalam pohon.

Berkat "Grup transisi tampilan bertingkat", Anda kini dapat menyusun elemen semu ::view-transition-group satu sama lain. Saat grup transisi tampilan disarangkan, efek seperti pemangkasan dapat dipulihkan selama transisi.

Pelajari cara menggunakan grup transisi tampilan

Elemen semu kini mewarisi lebih banyak properti animasi

Saat Anda menetapkan salah satu properti panjang animation-* pada pseudo ::view-transition-group(…), ::view-transition-image-pair(…), ::view-transition-old(…), dan ::view-transition-new(…) yang ada di dalamnya juga mewarisi properti tersebut. Hal ini berguna karena secara otomatis menjaga cross-fade antara ::view-transition-new(…) dan ::view-transition-old(…) tetap sinkron dengan ::view-transition-group(…).

::view-transition-group(.card) {
  animation-duration: 0.5s;
}

Awalnya pewarisan ini terbatas pada animation-duration dan animation-fill-mode (dan kemudian animation-delay juga), tetapi kini telah diperluas untuk mewarisi lebih banyak singkatan animasi.

Browser yang mendukung transisi tampilan, sekarang harus memiliki kode berikut di stylesheet agen penggunanya

:root::view-transition-image-pair(*),
:root::view-transition-old(*),
:root::view-transition-new(*) {
  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
  animation-timing-function: inherit;
  animation-iteration-count: inherit;
  animation-direction: inherit;
  animation-play-state: inherit;
}

Elemen semu yang mewarisi lebih banyak properti diluncurkan di Chrome 140.

Eksekusi callback promise finished tidak lagi menunggu frame

Saat menggunakan promise finished untuk mengeksekusi callback, Chrome dulu menunggu frame diproduksi sebelum mengeksekusi logika tersebut. Hal ini dapat menyebabkan kedipan di akhir animasi saat skrip memindahkan beberapa gaya dalam upaya untuk mempertahankan status yang serupa secara visual.

 document.startViewTransition(() => {
  if (from) {
    dfrom.classList.remove("shadow");
    dto.appendChild(target);
  } else {
    dto.classList.remove("shadow");
    dfrom.appendChild(target);
  }
}).finished.then(() => {
  if (from) {
    dto.classList.add("shadow");
  } else {
    dfrom.classList.add("shadow");
  }
  from = 1 - from;
});

Perubahan waktu ini memperbaiki situasi dengan memindahkan langkah-langkah pembersihan transisi tampilan agar berjalan secara asinkron setelah siklus proses selesai. Hal ini memastikan bahwa frame visual yang dihasilkan pada penyelesaian promise finished tetap mempertahankan struktur transisi tampilan, sehingga menghindari kedipan.

Perubahan pengaturan waktu ini diluncurkan di Chrome 140.

Fitur mendatang

Tahun ini belum berakhir, jadi masih ada waktu untuk meluncurkan beberapa fitur lagi.

Transisi tampilan yang tercakup siap diuji di Chrome 140

Transisi tampilan yang tercakup adalah ekstensi yang diusulkan untuk View Transition API yang memungkinkan Anda memulai transisi tampilan pada subtree DOM dengan memanggil element.startViewTransition() (bukan document.startViewTransition()) pada HTMLElement mana pun.

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

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.

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.

Posisi ::view-transition akan berubah dari fixed menjadi absolute di Chrome 142

Pseudo ::view-transition saat ini diposisikan menggunakan position: fixed. Setelah resolusi CSS Working Group, nilai ini akan berubah menjadi position: absolute.

Perubahan nilai position dari fixed menjadi absolute–yang akan hadir di Chrome 142–tidak dapat diamati secara visual karena blok penampung pseudo ::view-transition adalah blok penampung snapshot. Satu-satunya efek yang dapat diamati adalah nilai position yang berbeda saat melakukan getComputedStyle.

document.activeViewTransition hadir di Chrome 142

Saat transisi tampilan dimulai, instance ViewTransition akan dibuat. Objek ini berisi beberapa janji dan fungsi untuk melacak progres transisi, serta memungkinkan manipulasi seperti melewati transisi atau mengubah jenisnya.

Daripada mengharuskan Anda melacak instance ini secara manual, Chrome kini menyediakan properti document.activeViewTransition yang merepresentasikan objek ini. Jika tidak ada transisi yang sedang berlangsung, nilainya adalah null.

Untuk transisi tampilan dalam dokumen yang sama, nilai ditetapkan saat Anda memanggil document.startViewTransition. Untuk transisi tampilan lintas dokumen, Anda dapat mengakses instance ViewTransition tersebut dalam peristiwa pageswap dan pagereveal.

Dukungan untuk document.activeViewTransition akan segera diluncurkan di Chrome 142.

Mencegah transisi tampilan selesai secara otomatis dengan ViewTransition.waitUntil

Transisi tampilan otomatis mencapai status finished saat semua animasinya selesai. Untuk mencegah penyelesaian otomatis ini, Anda dapat segera menggunakan ViewTranistion.waitUntil. Saat meneruskan promise, ViewTransition hanya akan mencapai status finished saat promise yang diteruskan tersebut juga diselesaikan.

const t = document.startViewTransition(…);
t.waitUntil(async () => {
  await fetch(…);
});

Perubahan ini akan hadir akhir tahun ini dan akan memungkinkan, misalnya, menunggu fetch atau membuka kunci penerapan transisi tampilan yang digerakkan scroll yang lebih mudah.

Langkah berikutnya

Seperti yang Anda lihat, kami tidak berdiam diri sejak pertama kali meluncurkan Transisi View pada tahun 2023. Kami berharap dapat mengirimkan transisi tampilan yang tercakup pada masa mendatang dan, seperti biasa, kami terbuka untuk menerima masukan.

Jika ada pertanyaan tentang transisi tampilan, hubungi kami di media sosial. Permintaan fitur untuk transisi tampilan dapat diajukan di CSS WG. Jika Anda mengalami bug, laporkan bug Chromium untuk memberi tahu kami.