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. Hal ini menciptakan pengalaman pengguna yang lebih menarik secara visual bagi pengguna saat mereka menavigasi situs Anda, terlepas dari apakah situs tersebut dibuat sebagai aplikasi 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.
  • Bilah navigasi tetap yang tetap berada di tempatnya saat Anda menavigasi dari satu halaman ke halaman lainnya.
  • Petak dengan item yang bergerak posisi saat Anda memfilter.
Transisi yang dibuat dengan View Transition API. Coba situs demo. Memerlukan Chrome 111 atau yang lebih baru.

Mengimplementasikan 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 didukung oleh Animasi CSS.

Satu hal yang berbeda di antara kedua jenis tersebut adalah bagaimana Anda memicunya.

Transisi tampilan dokumen yang sama

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

Dukungan Browser

  • 111
  • 111
  • x
  • 18

Sumber

Cara memicu

Picu 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.

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

Mulai membuat

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

Membuat transisi tampilan dokumen yang sama

Transisi tampilan lintas dokumen

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

Dukungan Browser

  • 126
  • 126
  • x
  • x

Sumber

Cara memicu

Transisi tampilan lintas dokumen dipicu oleh navigasi lintas dokumen asal yang sama, jika kedua halaman diikutsertakan. 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.

Keikutsertaan teratas, 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 yang perlu diketahui tentang transisi tampilan lintas dokumen.

Membuat transisi tampilan lintas dokumen