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 membuka situs Anda, terlepas dari apakah aplikasi tersebut dibuat sebagai aplikasi multi-halaman (MPA) atau aplikasi web satu halaman (SPA).

Situasi umum ketika Anda akan menggunakan transisi tampilan meliputi:

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

Mengimplementasikan transisi tampilan

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

Kedua jenis transisi tampilan bergantung pada fondasi dan prinsip yang sama:

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

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

Transisi tampilan dokumen yang sama

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

Dukungan Browser

  • 111
  • 111
  • x
  • x

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 baru saat ditambahkan atau dihapus.

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

Mem-build transisi tampilan dokumen yang sama

Transisi tampilan lintas dokumen

Saat terjadi transisi tampilan di antara dua dokumen yang berbeda, transisi 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 origin yang sama, jika kedua halaman memilih ikut serta. Dengan kata lain, tidak ada API yang harus 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 transisi tampilan lintas dokumen di antara dua dokumen yang berbeda. Tergantung pada apakah Anda mendalami navigasi atau tidak, halaman akan terdorong ke tumpukan atau muncul.

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

Mulai membuat

Pelajari semua yang perlu diketahui tentang transisi tampilan lintas dokumen.

Mem-build transisi tampilan lintas dokumen