Transisi tampilan lintas dokumen untuk aplikasi multi-halaman

Bramus

Jika transisi tampilan terjadi antara dua dokumen yang berbeda, transisi tersebut disebut transisi tampilan lintas dokumen. Hal ini biasanya terjadi di aplikasi multi-halaman (MPA). Transisi tampilan lintas dokumen didukung di Chrome mulai Chrome 126.

Transisi tampilan lintas dokumen mengandalkan elemen penyusun dan prinsip yang sama persis dengan transisi tampilan dokumen yang sama, yang sangat disengaja:

1. Browser mengambil snapshot elemen yang memiliki view-transition-name unik di halaman lama dan baru.
2. DOM diperbarui saat rendering dinonaktifkan.
3. Terakhir, transisi didukung oleh animasi CSS.

Yang berbeda jika dibandingkan dengan transisi tampilan dokumen yang sama, adalah dengan transisi tampilan lintas dokumen, Anda tidak perlu memanggil document.startViewTransition untuk memulai transisi tampilan. Sebagai gantinya, pemicu untuk transisi tampilan lintas dokumen adalah navigasi dengan origin yang sama dari satu halaman ke halaman lain, tindakan yang biasanya dilakukan oleh pengguna situs Anda yang mengklik link.

Dengan kata lain, tidak ada API yang dapat dipanggil untuk memulai transisi tampilan antara dua dokumen. Namun, ada dua kondisi yang perlu dipenuhi:

• Kedua dokumen harus ada di origin yang sama.
• Kedua halaman harus ikut serta untuk mengizinkan transisi tampilan.

Kedua kondisi ini akan dijelaskan nanti dalam dokumen ini.

Transisi tampilan lintas dokumen dibatasi untuk navigasi dengan origin yang sama

Transisi tampilan lintas dokumen hanya terbatas pada navigasi dengan origin yang sama. Navigasi dianggap berasal dari origin yang sama jika origin kedua halaman yang berpartisipasi sama.

Origin halaman adalah kombinasi dari skema, nama host, dan port yang digunakan, seperti yang dijelaskan di web.dev.

Misalnya, Anda dapat memiliki transisi tampilan lintas dokumen saat menavigasi dari developer.chrome.com ke developer.chrome.com/blog, karena keduanya memiliki origin yang sama. Anda tidak dapat memiliki transisi tersebut saat bernavigasi dari developer.chrome.com ke www.chrome.com, karena keduanya adalah lintas-asal dan situs yang sama.

Transisi tampilan lintas dokumen bersifat opsional

Untuk memiliki transisi tampilan lintas dokumen di antara dua dokumen, kedua halaman yang berpartisipasi harus memilih ikut serta untuk mengizinkannya. Hal ini dilakukan dengan aturan at @view-transition di CSS.

Di aturan at @view-transition, tetapkan deskripsi navigation ke auto untuk mengaktifkan transisi tampilan untuk navigasi lintas dokumen dengan origin yang sama.

@view-transition {
  navigation: auto;
}

Dengan menetapkan deskripsi navigation ke auto, Anda memilih untuk mengizinkan transisi tampilan terjadi untuk NavigationType berikut:

• traverse
• push atau replace, jika aktivasi tidak dimulai oleh pengguna melalui mekanisme UI browser.

Navigasi yang dikecualikan dari auto adalah, misalnya, menavigasi menggunakan kolom URL atau mengklik bookmark, serta semua bentuk pemuatan ulang yang dimulai oleh pengguna atau skrip.

Jika navigasi memerlukan waktu terlalu lama–lebih dari empat detik untuk Chrome–transisi tampilan akan dilewati dengan TimeoutError DOMException.

Demo transisi tampilan lintas dokumen

Lihat demo berikut yang menggunakan transisi tampilan untuk membuat demo Stack Navigator. Tidak ada panggilan ke document.startViewTransition() di sini, transisi tampilan dipicu dengan membuka dari satu halaman ke halaman lain.

Menyesuaikan transisi tampilan lintas dokumen

Untuk menyesuaikan transisi tampilan lintas dokumen, ada beberapa fitur platform web yang dapat Anda gunakan.

• Peristiwa pageswap dan pagereveal
• Informasi aktivasi navigasi
• Pemblokiran render

Fitur ini bukan bagian dari spesifikasi View Transition API itu sendiri, tetapi dirancang untuk digunakan bersama dengan API tersebut.

Peristiwa pageswap dan pagereveal

Agar Anda dapat menyesuaikan transisi tampilan lintas dokumen, spesifikasi HTML menyertakan dua peristiwa baru yang dapat Anda gunakan: pageswap dan pagereveal.

Kedua peristiwa ini diaktifkan untuk setiap navigasi lintas dokumen dengan origin yang sama, terlepas dari apakah transisi tampilan akan terjadi atau tidak. Jika transisi tampilan akan terjadi di antara dua halaman, Anda dapat mengakses objek ViewTransition menggunakan properti viewTransition pada peristiwa ini.

• Peristiwa pageswap diaktifkan sebelum frame terakhir halaman dirender. Anda dapat menggunakannya untuk melakukan beberapa perubahan di menit-menit terakhir pada halaman keluar, tepat sebelum snapshot lama diambil.
• Peristiwa pagereveal diaktifkan di halaman setelah diinisialisasi atau diaktifkan kembali, tetapi sebelum peluang rendering pertama. Dengan fitur ini, Anda dapat menyesuaikan halaman baru sebelum snapshot baru diambil.

Misalnya, Anda dapat menggunakan peristiwa ini untuk menetapkan atau mengubah beberapa nilai view-transition-name dengan cepat atau meneruskan data dari satu dokumen ke dokumen lain dengan menulis dan membaca data dari sessionStorage untuk menyesuaikan transisi tampilan sebelum transisi tersebut benar-benar berjalan.

let lastClickX, lastClickY;
document.addEventListener('click', (event) => {
  if (event.target.tagName.toLowerCase() === 'a') return;
  lastClickX = event.clientX;
  lastClickY = event.clientY;
});

// Write position to storage on old page
window.addEventListener('pageswap', (event) => {
  if (event.viewTransition && lastClick) {
    sessionStorage.setItem('lastClickX', lastClickX);
    sessionStorage.setItem('lastClickY', lastClickY);
  }
});

// Read position from storage on new page
window.addEventListener('pagereveal', (event) => {
  if (event.viewTransition) {
    lastClickX = sessionStorage.getItem('lastClickX');
    lastClickY = sessionStorage.getItem('lastClickY');
  }
});

Jika mau, Anda dapat memutuskan untuk melewati transisi di kedua peristiwa.

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition) {
    if (goodReasonToSkipTheViewTransition()) {
      e.viewTransition.skipTransition();
    }
  }
}