Apa yang baru dalam transisi tampilan? (Pembaruan Google I/O 2024)

Bramus

Dipublikasikan: 16 Mei 2024

Di Google I/O 2024, kami mengumumkan langkah berikutnya untuk transisi tampilan: transisi tampilan lintas dokumen untuk aplikasi multi-halaman (MPA).

Selain itu, kami membagikan beberapa peningkatan yang memungkinkan Anda lebih mudah menggunakan transisi tampilan secara umum.

• Membagikan gaya animasi antar-elemen pseudo transisi tampilan dengan view-transition-class.
• Transisi tampilan selektif dengan jenis aktif.

Peningkatan ini berlaku untuk transisi tampilan dokumen yang sama untuk aplikasi web satu halaman (SPA) dan transisi tampilan lintas dokumen untuk MPA.

Transisi tampilan lintas dokumen untuk MPA

Di Chrome 111, tim Chrome meluncurkan transisi tampilan dokumen yang sama untuk aplikasi web satu halaman, fitur yang diterima dengan baik dalam komunitas pembuatan web.

Senang melihat banyak dari Anda yang telah membuat aplikasi dengan transisi tampilan. Mulai dari penerapan umum seperti "membuat thumbnail menjadi foto besar" hingga pengalaman imersif yang sangat disesuaikan seperti yang berikut dari Airbnb. Luar biasa!

Namun, implementasi awal mengharuskan Anda mem-build SPA untuk menggunakan transisi tampilan. Mulai Chrome 126, hal ini tidak lagi berlaku, transisi tampilan kini diaktifkan secara default untuk navigasi dengan origin yang sama. Sekarang Anda dapat membuat transisi tampilan antara dua dokumen berbeda yang memiliki origin yang sama.

Untuk mengaktifkan transisi tampilan lintas dokumen, kedua ujungnya harus memilih ikut serta. Untuk melakukannya, gunakan aturan at @view-transition dan tetapkan deskripsi navigation ke auto.

@view-transition {
  navigation: auto;
}

Transisi tampilan lintas dokumen menggunakan elemen penyusun dan prinsip yang sama seperti transisi tampilan dokumen yang sama. Elemen dengan view-transition-name yang diterapkan akan diambil, dan Anda dapat menyesuaikan animasi menggunakan animasi CSS.

Untuk menyesuaikan transisi tampilan lintas dokumen, gunakan peristiwa pageswap dan pagereveal, yang memberi Anda akses ke objek transisi tampilan.

• Dengan pageswap, Anda dapat melakukan beberapa perubahan mendadak di halaman keluar, tepat sebelum snapshot lama diambil.
• Dengan pagereveal, Anda dapat menyesuaikan halaman baru sebelum mulai dirender setelah diinisialisasi.

Dalam kedua peristiwa tersebut, Anda memiliki akses ke objek NavigationActivation untuk menyesuaikan transisi tampilan lintas dokumen berdasarkan entri histori tujuan lama dan baru, atau jenis navigasi.

Selain itu, Anda dapat menunggu konten dimuat dengan pemblokiran render dan mengandalkan pra-rendering untuk meningkatkan waktu pemuatan sebelum transisi tampilan berjalan.

Demo

Demo Stack Navigator ini menggabungkan semua fitur ini (beserta beberapa peningkatan).

Ini adalah MPA dengan navigasi lintas dokumen, yang dihosting di origin yang sama. Dengan menggunakan pagereveal, jenis animasi ditentukan berdasarkan entri histori tujuan lama dan baru.

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition) {
    // Determine animation type based on the old/new history entries
    const transitionClass = determineTransitionClass(navigation.activation.from, navigation.currentEntry);
    document.documentElement.dataset.transition = transitionClass;

    // Cleanup after transition ran
    await e.viewTransition.finished;
    delete document.documentElement.dataset.transition;
  }
});

Baca dokumentasi

Untuk mengetahui informasi selengkapnya tentang cara mengaktifkan dan menyesuaikan transisi tampilan lintas dokumen, lihat dokumentasi transisi tampilan lintas dokumen kami.

Melihat peningkatan transisi

Selain mengirimkan transisi tampilan lintas dokumen untuk MPA, Chrome juga menyertakan beberapa peningkatan untuk menggunakan transisi tampilan secara umum.

Peningkatan ini berlaku untuk transisi tampilan dokumen yang sama untuk SPA dan transisi tampilan lintas dokumen untuk MPA.

Membagikan gaya animasi ke view-transition-class

Hingga saat ini, saat menganimasikan beberapa snapshot dengan cara yang sama, Anda harus menargetkan setiap snapshot satu per satu dengan mengulangi pemilih semunya untuk setiap elemen yang memiliki view-transition-name unik.

Dengan view-transition-class, Anda kini dapat menambahkan nama bersama ke semua snapshot. Gunakan nama bersama ini di pemilih pseudo untuk menargetkan semua snapshot yang cocok. Hal ini menghasilkan pemilih yang jauh lebih sederhana, yang secara otomatis diskalakan dari satu hingga banyak elemen.

#cards-wrapper > div {
  view-transition-class: card;
}
html::view-transition-group(.card) {
  animation-timing-function: var(--bounce);
}

Contoh kartu berikut menggunakan view-transition-class untuk menerapkan pengaturan waktu animasi yang sama ke banyak snapshot menggunakan satu pemilih.

Untuk mengetahui view-transition-class lebih lanjut, baca dokumentasi khusus di view-transition-class.

Transisi tampilan selektif dengan jenis aktif

Penyempurnaan lain untuk melihat transisi adalah pengenalan penambahan jenis ke transisi tampilan saat mengambil dan menjalankannya. Hal ini memudahkan Anda menggunakan berbagai transisi tampilan di halaman yang sama, tanpa deklarasi yang mengubah yang lain.

Misalnya, saat membuka halaman berikutnya atau halaman sebelumnya dalam urutan penomoran halaman, Anda mungkin ingin menggunakan animasi yang berbeda, bergantung pada apakah Anda membuka halaman yang lebih tinggi atau lebih rendah dari urutan.

Sebelum jenis aktif, Anda dapat menambahkan class ke DOM dan merespons class tersebut di CSS. Namun, Anda juga harus melakukan pembersihan setelah transisi selesai.

Dengan jenis transisi tampilan, Anda dapat mencapai hasil yang sama, dengan manfaat tambahan bahwa jenis ini akan otomatis dibersihkan setelah transisi tampilan selesai. Jenis hanya berlaku saat merekam atau melakukan transisi.

Untuk transisi tampilan dokumen yang sama, teruskan types ke metode startViewTransition yang kini menerima objek. update adalah fungsi callback yang mengupdate DOM, dan types adalah urutan string.

const direction = determineBackwardsOrForwards();

const t = document.startViewTransition({
  update: updateTheDOMSomehow,
  types: ['slide', direction],
}););

Untuk transisi tampilan lintas dokumen, tetapkan jenis di aturan saat @view-transition menggunakan deskripsi types atau tetapkan secara langsung dalam peristiwa pageswap dan pagereveal.

@view-transition {
  navigation: auto;
  types: slide, forwards;
}

Setelah jenis ditetapkan, Anda dapat merespons jenis ini di CSS menggunakan pemilih class semu :active-view-transition-type() dan :active-view-transition yang berlaku untuk root transisi tampilan.

/* Animation styles for forwards type only */
html:active-view-transition-type(forwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-left;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-right;
  }
}

Untuk mengetahui informasi selengkapnya tentang jenis transisi tampilan, baca dokumentasi khusus untuk transisi tampilan dokumen yang sama dan transisi tampilan lintas dokumen.

Masukan

Masukan developer selalu kami hargai. Untuk melakukannya, laporkan masalah ke CSS Working Group di GitHub dengan saran dan pertanyaan. Awali masalah Anda dengan [css-view-transitions].

Jika Anda mengalami bug, laporkan bug Chromium.