Transisi tampilan untuk aplikasi web satu halaman

Pola umum untuk halaman web adalah menggunakan JavaScript untuk mengganti konten di halaman secara dinamis, tanpa memuat dokumen HTML baru yang lengkap. Ini disebut Aplikasi Web Satu Halaman, atau SPA. Transisi tampilan memberi Anda cara untuk menunjukkan kontinuitas atau konteks di antara halaman di SPA Anda.

Transisi halaman penuh

Saat pengguna membuka tampilan baru di SPA, framework Anda akan mengganti DOM dengan konten baru. Hal ini membuat konten hanya muncul, tetapi bagaimana jika Anda ingin memberikan transisi antara konten saat ini dan konten baru?

Transisi sering kali menampilkan tampilan lama dan baru secara bersamaan, misalnya memudarkan tampilan lama sambil memudarkan tampilan baru. Karena konten yang ada diganti, hal ini menjadi tantangan sebelum adanya transisi tampilan.

Untuk menggunakan transisi tampilan, Anda harus membungkus logika untuk mengubah DOM dalam callback. Untuk contoh ini, kita memiliki implementasi router dasar yang disediakan oleh komponen web bernama MyRouter. Cara Anda mengaktifkan transisi tampilan akan bergantung pada router dan framework yang Anda gunakan.

document.startViewTransition(() => updateTheDOMSomehow());

Hal ini memungkinkan transisi default, yang memudarkan tampilan lama sekaligus memudarkan tampilan baru.

Apa yang terjadi di sini? Saat Anda memanggil document.startViewTransition(), browser akan mengambil snapshot tampilan lama. Kemudian, fungsi ini memanggil fungsi callback yang Anda teruskan, yang memperbarui DOM ke tampilan baru (tetapi belum menampilkannya). Setelah fungsi callback selesai, browser akan memulai transisi ke konten baru.

// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
  updateTheDOMSomehow();
  return;
} else {
  // With a View Transition:
  document.startViewTransition(() => updateTheDOMSomehow());
}

Menyesuaikan transisi

Seperti yang Anda lihat pada contoh sebelumnya, Transisi Tampilan default memudarkan tampilan lama sekaligus memudarkan tampilan baru. Anda dapat menyesuaikan transisi agar lebih sesuai dengan gaya situs Anda dengan menata gaya elemen semu yang dihasilkan oleh transisi tampilan.

Anda dapat menentukan transisi keluar dengan ::view-transition-old() dan transisi masuk dengan ::view-transition-new(). Anda juga dapat menentukan nilai untuk keduanya dengan ::view-transition-group().

Dalam contoh ini, tampilan lama akan keluar menggunakan transisi slide-out-to-left dan tampilan baru akan masuk menggunakan transisi slide-in-from-right. Keduanya akan memiliki durasi 200 milidetik.

::view-transition-group(root){
  animation-duration: 200ms;
}

::view-transition-old(root) {
  animation-name: slide-out-to-left;
}

::view-transition-new(root) {
  animation-name: slide-in-from-right;
}

Transisi yang berbeda berdasarkan konteks

Anda mungkin ingin memiliki transisi yang berbeda berdasarkan tindakan pengguna. Misalnya, jika mengklik link dari halaman beranda Anda menggeser tampilan baru dari kanan, Anda akan berharap mengklik link untuk kembali ke halaman beranda akan menggeser tampilan beranda dari kiri.

Anda dapat menentukan animasi yang berbeda menggunakan class semu :active-view-transition-type().

html:active-view-transition-type(forwards) {
  &::view-transition-old(root) {
    animation-name: slide-out-to-left;
  }

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

Anda kemudian dapat memilih jenis transisi tampilan yang akan digunakan saat memanggil document.startViewTransition().

const direction = next === 'home' ? 'backwards' : 'forwards';

document.startViewTransition({
  update: updateTheDOMSomehow,
  types: [direction],
});

Mentransisikan elemen tertentu

Sejauh ini, Anda hanya menerapkan transisi ke elemen root untuk mentransisikan seluruh tampilan. Namun, Anda juga dapat menggunakan transisi tampilan untuk menganimasikan bagian tertentu dari halaman Anda.

Misalnya, Anda mungkin memiliki konten di tampilan lama yang cocok dengan konten di tampilan baru. Ini bisa berupa judul konten atau gambar. Bahkan bisa berupa gambar thumbnail di tampilan lama, dan video di tampilan baru.

Pertama, Anda perlu menentukan elemen mana yang akan ditransisikan, menggunakan properti view-transition-name. Agar transisi tampilan berfungsi, untuk setiap view-transition-name, harus ada tepat satu elemen sebelum Anda memanggil document.startViewTransition() dan tepat satu elemen setelah callback di document.startViewTransition() selesai.

Dalam contoh ini, ada pemutar musik yang menampilkan gambar album, judul, dan artis. Tampilan alternatif menampilkan konten yang sama yang disusun ulang, dengan penambahan lirik lagu.

Dalam contoh sebelumnya, ada tepat satu elemen yang bertransisi di tampilan lama dan baru, dan elemen tersebut bahkan memiliki selektor yang sama. Elemen yang ditransisikan tampak bergerak di antara ukuran dan posisinya. Bagian tampilan yang tidak bertransisi akan melakukan fade-in dan fade-out.

Lihat contoh yang lebih rumit. Misalnya, halaman beranda di blog dapat menampilkan judul dan gambar untuk setiap postingan, dan judul serta gambar ini juga ada di tampilan halaman lengkap postingan blog. Saat membuka postingan tertentu dari halaman beranda, Anda mungkin ingin membuat judul dan gambar tampak bertransisi ke lokasi barunya untuk memberikan konteks.

Untuk melakukannya pada judul, Anda harus memiliki view-transition-name pada elemen judul yang unik di tampilan lama, dibagikan dengan elemen judul di tampilan baru, dan unik di tampilan baru. Hal ini merupakan tantangan, karena halaman beranda memiliki beberapa judul dan gambar, dan Anda tidak tahu mana yang akan diklik pengguna.

Anda memiliki dua opsi untuk menyelesaikannya. Anda dapat memilih untuk menambahkan view-transition-name unik untuk setiap postingan di halaman beranda, lalu mencocokkan nama tersebut di setiap postingan halaman penuh. Anda dapat membuatnya menggunakan ID postingan. Opsi lainnya adalah menggunakan view-transition-name generik, tetapi hanya menerapkannya setelah pengguna mengklik postingan, tetapi sebelum memanggil document.startViewTransition().

Mendesain transisi

Transisi tampilan adalah sekumpulan alat yang dapat Anda gunakan untuk memandu pengguna dan memberikan petunjuk merek atau konteks tambahan. Anda mungkin menggunakan beberapa teknik untuk menemukan transisi yang cocok untuk situs Anda.

Bergantung pada efek yang Anda cari, Anda mungkin juga perlu menyesuaikan elemen atau animasi. Pada contoh sebelumnya, beberapa gaya disesuaikan untuk mendapatkan transisi yang lancar.

Judul memiliki aturan width: fit-content, yang merupakan gaya yang berguna saat Anda melakukan transisi teks yang tidak di-wrap (atau memiliki wrapping yang sama di tampilan lama dan baru. Jika tidak, transisi mungkin terjadi antara elemen dengan lebar yang berbeda, sehingga transisi menjadi kurang lancar.

Rasio aspek gambar juga berbeda di tampilan lama dan tampilan baru. Contoh ini mengubah animasi dan properti object-fit sehingga transisi tampak lancar.

Menghormati prefers-reduced-motion

Alasan umum pengguna meminta gerakan yang dikurangi adalah karena animasi layar penuh, seperti yang dapat dicapai dengan transisi tampilan, dapat menyebabkan ketidaknyamanan bagi orang dengan gangguan gerakan vestibular. Anda dapat menonaktifkan animasi menggunakan kueri media prefers-reduced-motion. Anda juga dapat memilih untuk memberikan animasi alternatif yang lebih halus, tetapi tetap menyampaikan bagaimana elemen terhubung.

@media (prefers-reduced-motion) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

Periksa pemahaman Anda