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

Bramus

Dipublikasikan: 16 Mei 2024

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

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

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

Peningkatan ini berlaku untuk transisi tampilan dalam dokumen yang sama untuk aplikasi 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 halaman tunggal, sebuah fitur yang diterima dengan baik oleh komunitas pengembangan web.

Senang rasanya melihat apa yang telah dibuat banyak dari Anda dengan transisi tampilan. Mulai dari penerapan umum yang "membuat thumbnail berkembang menjadi foto besar" hingga pengalaman imersif yang sangat disesuaikan seperti yang satu ini dari Airbnb. Luar biasa!

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

Untuk mengaktifkan transisi tampilan lintas dokumen, kedua ujung harus memilih untuk mengaktifkannya. Untuk melakukannya, gunakan aturan @@view-transition dan tetapkan deskriptor navigation ke auto.

@view-transition {
  navigation: auto;
}

Transisi tampilan lintas dokumen menggunakan elemen penyusun dan prinsip yang sama dengan transisi tampilan dalam dokumen yang sama. Elemen dengan view-transition-name yang diterapkan akan direkam, 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 di menit-menit terakhir pada 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 (bersama dengan 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.

Peningkatan transisi tampilan

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

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

Membagikan gaya animasi dengan view-transition-class

Hingga saat ini, saat menganimasikan beberapa snapshot dengan cara yang sama, Anda perlu menargetkan setiap snapshot satu per satu dengan mengulangi pseudo-selector-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 pseudo-selector untuk menargetkan semua snapshot yang cocok. Hal ini menghasilkan pemilih yang jauh lebih sederhana, yang 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 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

Penyempurnaan lain pada transisi tampilan adalah pengenalan penambahan jenis ke transisi tampilan saat merekam dan melakukannya. Hal ini mempermudah penggunaan 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 halaman yang lebih rendah dari urutan tersebut.

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

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

Untuk transisi tampilan dalam 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 dalam aturan @@view-transition menggunakan deskriptor 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 pseudo-class :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 jenis transisi tampilan lebih lanjut, lihat dokumentasi khusus untuk transisi tampilan dalam 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 menyertakan saran dan pertanyaan. Awali masalah Anda dengan [css-view-transitions].

Jika Anda mengalami bug, laporkan bug Chromium.