Transisi Navigasi Terarah

Aplikasi Web Satu Halaman (SPA) memberikan tampilan navigasi dengan mengganti konten halaman tanpa membuka halaman baru. Secara default, konten hanya diganti, tanpa transisi apa pun. Transisi terarah dapat memperkuat hubungan spasial antar-tampilan secara visual.

Dengan menggeser konten baru dari arah gerakan pengguna, Anda membuat peta mental struktur aplikasi. Misalnya, situs produk dapat menampilkan transisi ke kanan untuk "maju", dan ke kiri untuk "kembali", atau slideshow dapat bertransisi ke atas dan ke bawah untuk menampilkan slide berikutnya dan sebelumnya.

Langkah-Langkah Penerapan

1. Mendeteksi Arah Navigasi: Menentukan apakah pengguna bergerak "maju" atau "mundur" dalam alur aplikasi. Cara Anda mendeteksi arah bergantung pada kasus penggunaan Anda.
2. Memicu Transisi dengan Jenis: Teruskan arah dalam array types ke document.startViewTransition() untuk mengategorikan transisi.
3. Tentukan Animasi Terarah dengan CSS: Gunakan class pseudo :active-view-transition-type() untuk menerapkan animasi tertentu berdasarkan jenis navigasi.

Menentukan Keyframe

Tentukan animasi geser ke dan dari setiap arah. Untuk performa terbaik, animasikan perubahan posisi menggunakan properti transform atau properti transformasi individual, scale, rotate, dan translate. opacity umumnya juga berperforma baik, tetapi hindari menganimasikan properti CSS lainnya tanpa terlebih dahulu memverifikasi bahwa properti tersebut tidak memicu tata letak atau penggambaran.

/* Slide an element out to the left */
@keyframes slide-to-left {
  /* Mandatory: animate `transform` instead of inset properties for better performance. */
  to { transform: translateX(-100%); }
}

/* Slide an element in from the right */
@keyframes slide-from-right {
  from { transform: translateX(100%); }
}

/* Slide an element out to the right */
@keyframes slide-to-right {
  to { transform: translateX(100%); }
}

/* Slide an element in from the left */
@keyframes slide-from-left {
  from { transform: translateX(-100%); }
}

Menyiapkan setelan animasi bersama

Gunakan pemilih ::view-transition-group(root) untuk menerapkan setelan animasi yang digunakan bersama di semua transisi.

::view-transition-group(root){
  animation: 0.4s ease-in-out both;
}

Menerapkan Animasi Terarah

Gunakan class pseudo active-view-transition-type untuk menargetkan tampilan transisi secara khusus saat jenis "maju" atau "mundur" aktif.

/* MANDATORY: Apply forward animations when the 'forward' type is active */
html:active-view-transition-type(forward)::view-transition-old(root) {
  animation-name: slide-to-left;
}
html:active-view-transition-type(forward)::view-transition-new(root) {
  animation-name: slide-from-right;
}

/* MANDATORY: Apply backward animations when the 'backward' type is active */
html:active-view-transition-type(backward)::view-transition-old(root) {
  animation-name: slide-to-right;
}
html:active-view-transition-type(backward)::view-transition-new(root) {
  animation-name: slide-from-left;
}

Memicu Transisi

Saat menavigasi, teruskan jenis yang sesuai ke metode startViewTransition.

const transitionType = yourTransitionTypeLogic();
const updateDOM = yourUpdateDOMLogic();

document.startViewTransition({
  update: updateDOM,
  types: [transitionType] // Matches the CSS :active-view-transition-type() selectors
});

Aksesibilitas

Selalu hargai preferensi pengguna untuk mengurangi gerakan dengan menonaktifkan atau menyederhanakan animasi.

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root) {
    animation: none !important;
  }
}

Strategi penggantian

View Transitions API adalah progressive enhancement. Di browser yang tidak didukung, document.startViewTransition akan menjadi undefined. Anda harus menggabungkan logika navigasi dalam pemeriksaan deteksi fitur untuk memastikan update DOM masih terjadi segera tanpa animasi, seperti yang ditunjukkan dalam fungsi bantuan ini.

/**
 * Navigates to a new view with a directional transition.
 * @param {Function} updateDOM - Callback to update the DOM state.
 * @param {string} direction - Either 'forward' or 'backward'.
 */
function navigate(updateDOM, direction) {
  // Feature detect for browsers that do not support View Transitions
  if (!document.startViewTransition) {
    updateDOM();
    return;
  }

  // Start transition with the specific navigation type
  document.startViewTransition({
    update: updateDOM,
    types: [direction] // Matches the CSS :active-view-transition-type() selectors
  });
}