Transisi Lintas Dokumen

Transisi tampilan lintas dokumen memungkinkan Anda membuat transisi yang lancar dan mirip aplikasi di antara berbagai halaman Aplikasi Multi-Halaman (MPA). Secara default, browser melakukan cross-fade, tetapi Anda dapat menyesuaikannya agar sesuai dengan estetika situs Anda.

Langkah-Langkah Penerapan

1. Memilih untuk menggunakan Transisi Tampilan Lintas Dokumen

Halaman sumber dan tujuan harus mengaktifkan transisi tampilan agar browser dapat memicunya saat navigasi.

/* Respect user's preference for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  /* Add to a global stylesheet shared by both pages */
  @view-transition {
    /* Enables transitions for same-origin navigations */
    navigation: auto;
  }
}

2. Menyesuaikan Animasi Transisi (Opsional)

Anda dapat menargetkan status transisi lama dan baru menggunakan elemen pseudo untuk membuat efek seperti slide atau pengungkapan.

/* Customizing the outgoing page animation */
::view-transition-old(root) {
  /* Move the old page out to the left */
  animation: 0.4s ease-in both slide-out;
}

/* Customizing the incoming page animation */
::view-transition-new(root) {
  /* Move the new page in from the right */
  animation: 0.4s ease-out both slide-in;
}

@keyframes slide-out {
  to { transform: translateX(-20%); opacity: 0; }
}

@keyframes slide-in {
  from { transform: translateX(100%); }
}

3. Membuat Transisi Terarah (Opsional)

Anda mungkin menginginkan efek transisi yang berbeda, bergantung pada halaman yang Anda buka. Misalnya, saat beralih dari halaman beranda ke halaman kontak, Anda mungkin ingin efek konten baru muncul dari kanan. Saat kembali ke halaman beranda, tidak masuk akal jika efeknya sama.

Jika halaman yang Anda buka akan selalu memiliki jenis transisi yang sama, terlepas dari cara Anda membuka halaman tersebut, Anda dapat menentukannya dengan types dalam aturan @view-transition.

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
    /* Specify the types of view transitions that will always be used on this page. */
    types: previous;
  }
}

Anda juga dapat menentukan jenis transisi secara bersyarat di dalam pemroses peristiwa untuk pagereveal.

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition && window.navigation?.activation) {
    // Use application-specific logic to compute a transition type
     const transitionType = yourTransitionTypeLogic(navigation.activation.from, navigation.activation.entry);
    e.viewTransition.types.add(transitionType);
  }
});

Kemudian, gunakan pemilih pseudo :active-view-transition-type() untuk menerapkan animasi yang berbeda untuk setiap jenis.

:active-view-transition-type(next) {
  &::view-transition-old(root) {
    animation-name: slide-out-next;
  }

  &::view-transition-new(root) {
    animation-name: slide-in-next;
  }
}
:active-view-transition-type(previous) {
  &::view-transition-old(root) {
    animation-name: slide-out-previous;
  }

  &::view-transition-new(root) {
    animation-name: slide-in-previous;
  }
}

Strategi penggantian

Jika browser tidak mendukung transisi tampilan, atau transisi tampilan lintas dokumen, browser akan melakukan navigasi halaman instan standar. Transisi tampilan lintas dokumen adalah progressive enhancement; fungsi inti situs tidak terpengaruh.

Untuk memeriksa dukungan di JavaScript:

if ('onpagereveal' in window) {
  // Browser supports cross-document view transitions
}

Jika browser tidak mendukung Navigation API, Anda tidak akan dapat menggunakannya untuk menentukan jenis transisi. Gunakan metode alternatif untuk menentukan jenis transisi, atau berikan jenis transisi penggantian. Jika tidak, browser akan melakukan navigasi halaman instan standar.

Untuk memeriksa dukungan di JavaScript:

if (window.navigation?.activation) {
  // Browser supports the Navigation API
}