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

Bramus

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

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

• Berbagi gaya animasi di antara 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 menghadirkan transisi tampilan dokumen yang sama untuk aplikasi web satu halaman, sebuah fitur yang diterima dengan baik dalam komunitas pembuatan web.

Sangat menyenangkan melihat berapa banyak dari Anda yang telah membangun dengan transisi tampilan. Mulai dari implementasi umum yang "membuat thumbnail tumbuh menjadi foto besar" hingga pengalaman imersif yang sangat disesuaikan seperti dari Airbnb. Hebat!

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

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

@view-transition {
  navigation: auto;
}

Transisi tampilan lintas dokumen menggunakan elemen dan prinsip penyusun yang sama seperti transisi tampilan dokumen yang sama. Elemen dengan view-transition-name yang diterapkan ditangkap, 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.

Di kedua peristiwa tersebut, Anda memiliki akses ke objek NavigationActivation untuk menyesuaikan transisi tampilan lintas dokumen berdasarkan entri histori tujuan yang 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 asal yang sama. Dengan menggunakan pagereveal, jenis animasi ditentukan berdasarkan entri histori tujuan yang 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 informasi selengkapnya tentang cara mengaktifkan dan menyesuaikan transisi tampilan lintas dokumen, lihat dokumentasi transisi tampilan lintas dokumen kami.

Lihat peningkatan transisi

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

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

Bagikan gaya animasi kepada view-transition-class

Hingga saat ini, saat menganimasikan beberapa snapshot dengan cara yang sama, Anda perlu menargetkan setiap snapshot satu per satu dengan mengulangi pemilih pseudo-nya 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 menskalakan dari satu ke 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 tentang view-transition-class.

Transisi tampilan selektif dengan jenis aktif

Peningkatan lainnya untuk melihat transisi adalah pengenalan penambahan jenis ke transisi tampilan saat mengambil dan menjalankannya. Hal ini mempermudah penggunaan berbagai transisi tampilan di halaman yang sama, tanpa deklarasi yang satu mengubah yang lain.

Misalnya, saat membuka halaman berikutnya atau ke halaman sebelumnya dalam urutan penomoran halaman, Anda dapat menggunakan animasi yang berbeda bergantung pada apakah Anda akan membuka halaman yang lebih tinggi atau halaman yang 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 memperoleh hasil yang sama. Manfaat tambahan dari jenis ini akan otomatis dibersihkan setelah transisi tampilan selesai. Jenis hanya berlaku saat mengambil atau melakukan transisi.

Untuk transisi tampilan dokumen yang sama, teruskan types ke metode startViewTransition yang sekarang menerima objek. update adalah fungsi callback yang memperbarui 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 dalam @view-transition at-aturan menggunakan deskripsi types atau tetapkan jenis tersebut dengan cepat di peristiwa pageswap dan pagereveal.

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

Setelah jenis disetel, Anda dapat merespons jenis ini di CSS menggunakan pemilih class pseudo :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 lebih lanjut jenis transisi tampilan, baca dokumentasi khusus untuk transisi tampilan dokumen yang sama dan transisi tampilan lintas dokumen.

Masukan

Kami selalu mengharapkan masukan dari developer. Untuk melakukannya, ajukan masalah ke Kelompok Kerja CSS di GitHub beserta saran dan pertanyaan. Awali masalah Anda dengan [css-view-transitions].

Jika Anda mengalami bug, sebaiknya laporkan bug Chromium.