Transisi yang lancar dengan View Transition API

Bramus

View Transition API memberi Anda kemampuan untuk membuat transisi visual yang lancar di antara berbagai tampilan di situs Anda. Hal ini menciptakan pengalaman pengguna yang lebih menarik secara visual bagi pengguna saat mereka menjelajahi situs Anda, terlepas dari apakah situs tersebut dibuat sebagai aplikasi web multi-halaman (MPA) atau aplikasi web satu halaman (SPA).

Situasi umum saat Anda akan menggunakan transisi tampilan meliputi:

  • Gambar thumbnail di halaman listingan produk yang bertransisi menjadi gambar produk ukuran penuh di halaman detail produk.
  • Menu navigasi tetap yang tetap berada di tempatnya saat Anda membuka halaman dari satu halaman ke halaman lainnya.
  • Petak dengan item yang memindahkan posisi saat Anda memfilter.
Transisi yang dibuat dengan View Transition API. Coba situs demo. Memerlukan Chrome 111 atau yang lebih baru.

Menerapkan transisi tampilan

Transisi tampilan tidak terikat dengan arsitektur atau framework aplikasi tertentu dan dapat dipicu tidak hanya pada satu dokumen, tetapi juga di antara dua dokumen yang berbeda.

Kedua jenis transisi tampilan mengandalkan elemen penyusun dan prinsip yang sama:

  1. Browser mengambil snapshot status lama dan baru.
  2. DOM diperbarui saat rendering disembunyikan.
  3. Transisi ini didukung oleh Animasi CSS.

Satu hal yang berbeda antara kedua jenis ini adalah cara Anda memicunya.

Transisi tampilan dokumen yang sama

Jika transisi tampilan berjalan di satu dokumen, transisi tersebut disebut transisi tampilan dokumen yang sama. Hal ini biasanya terjadi di aplikasi web satu halaman (SPA). Transisi tampilan dokumen yang sama didukung di Chrome mulai Chrome 111.

Dukungan Browser

  • Chrome: 111.
  • Edge: 111.
  • Firefox: tidak didukung.
  • Safari: 18.

Sumber

Cara memicu

Memicu transisi tampilan dokumen yang sama dengan memanggil document.startViewTransition:

function handleClick(e) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow();
    return;
  }

  // With a View Transition:
  document.startViewTransition(() => updateTheDOMSomehow());
}

Contoh

Contoh kartu berikut adalah SPA yang menggunakan transisi tampilan dokumen yang sama untuk menganimasikan kartu saat kartu baru ditambahkan atau dihapus.

Perekaman demo Kartu. Memerlukan Chrome 111 atau yang lebih baru.

Mulai membuat

Lihat halaman dokumentasi khusus untuk mempelajari semua hal yang perlu diketahui tentang transisi tampilan dokumen yang sama.

Membuat transisi tampilan dokumen yang sama

Transisi tampilan lintas dokumen

Jika transisi tampilan terjadi antara dua dokumen yang berbeda, transisi tersebut disebut transisi tampilan lintas dokumen. Hal ini umum untuk MPA. Transisi tampilan lintas dokumen didukung di Chrome 126 dan yang lebih baru.

Dukungan Browser

  • Chrome: 126.
  • Edge: 126.
  • Firefox: tidak didukung.x
  • Pratinjau Teknologi Safari: didukung.

Cara memicu

Transisi tampilan lintas dokumen dipicu oleh navigasi lintas dokumen dengan origin yang sama, jika kedua halaman ikut serta. Dengan kata lain, tidak ada API yang dapat dipanggil untuk memulai transisi tampilan lintas dokumen. Saat pengguna mengklik link, klik tersebut akan memicu transisi tampilan.

Untuk memilih ikut serta, gunakan cuplikan CSS berikut:

@view-transition {
  navigation: auto;
}

Contoh

Contoh Stack Navigator berikut adalah MPA yang menggunakan transisi tampilan lintas dokumen antara dua dokumen yang berbeda. Bergantung pada apakah Anda akan melakukan navigasi lebih dalam atau tidak, halaman akan didorong ke tumpukan atau muncul.

Rekaman demo Stack Navigator. Memerlukan Chrome 126 atau yang lebih baru.

Mulai membuat

Pelajari semua hal yang perlu diketahui tentang transisi tampilan lintas dokumen.

Membuat transisi tampilan lintas dokumen