Halaman ini diterjemahkan oleh Cloud Translation API.

Studi Kasus: Cara Google membuat pengalaman terhubung untuk Mode AI barunya menggunakan transisi tampilan

Jason Michelson

Bramus

Dipublikasikan: 28 Agustus 2025

Google Penelusuran memiliki jangkauan terbesar di dunia, sehingga perubahan pada pengalaman pengguna kami dapat berdampak pada miliaran pengguna. Kami telah lama memimpikan pengalaman web yang terasa lebih modern dan mirip aplikasi. Saat pengembangan Mode AI dimulai, kami ingin menciptakan pengalaman bagi pengguna kami yang membuat transisi ke Mode AI dari penelusuran standar terasa lancar dan terhubung. Saat mendengar tentang transisi tampilan lintas dokumen, kami tahu bahwa fitur ini akan sangat cocok untuk fitur tersebut. Studi kasus ini membagikan apa yang kami pelajari saat menambahkan fitur transisi bersamaan dengan peluncuran Mode AI.

Perekaman penelusuran di Google Penelusuran, beralih dari hasil penelusuran ke Mode AI. Transisi menggunakan transisi tampilan.

Transisi tampilan lintas dokumen adalah terobosan dalam hal alat browser native dan kami sangat antusias untuk melihat bagaimana hal ini akan membentuk web ke depannya.

Browser Support

Source

Mengubah status quo

Google Penelusuran memiliki persyaratan dukungan browser yang ketat dan konservatif. Biasanya, penggunaan fitur dengan ketersediaan terbatas dilarang. Untuk transisi tampilan lintas dokumen, kami mendapati bahwa polyfill tidak dapat dipertahankan, dengan penghalang utama adalah tidak adanya API pengambilan snapshot piksel dan meng-clone seluruh area tampilan menyebabkan masalah performa yang besar. Oleh karena itu, menggunakan fitur sebagai peningkatan progresif adalah cara terbaik untuk meluncurkan bersama Mode AI. Karena animasi yang dibuat oleh transisi tampilan tidak secara langsung memengaruhi fungsi situs, untuk traffic yang tidak didukung, animasi tersebut akan dinonaktifkan, yang sudah menjadi status produksi saat ini tanpa animasi transisi.

Kami pertama kali menguji strategi peningkatan progresif ini dengan pengguna internal kami. Hal ini memberi kami masukan awal, yang sebagian besar positif. Masukan yang diterima juga memunculkan bug, termasuk masalah performa dan interaksi yang tidak diinginkan dengan fitur lain seperti konteks penumpukan yang tumpang-tindih.

Kami mendapati bahwa strategi ini berhasil dan saya yakin bahwa kami akan mencobanya dengan fitur browser baru lainnya pada masa mendatang.

Kesulitan yang kami alami, dan cara mengatasinya

Latensi, pemblokiran render, dan timer watchdog

Secara keseluruhan, latensi tambahan yang muncul dengan transisi tampilan MPA dapat diabaikan untuk 99% kasus penggunaan, terutama pada hardware modern. Namun, Google Penelusuran memiliki standar yang sangat tinggi dalam hal latensi dan kami berupaya menciptakan pengalaman pengguna yang berfungsi dengan baik di semua perangkat. Bagi kami, bahkan beberapa milidetik tambahan sangat penting, jadi kami harus berinvestasi dalam cara menerapkan transisi tampilan lintas dokumen dengan benar tanpa merusak pengalaman pengguna bagi siapa pun.

Pemblokiran rendering adalah teknik yang cocok dengan transisi tampilan lintas dokumen. Snapshot elemen semu dari dokumen masuk hanya dapat menampilkan konten yang telah dirender. Oleh karena itu, untuk menganimasikan konten dari dokumen yang masuk, Anda perlu merender blok hingga elemen target yang ingin Anda animasikan telah dirender. Untuk melakukannya, gunakan atribut blocking pada HTMLLinkElement. Pemblokiran rendering memiliki kekurangan karena menunggu elemen yang berada di akhir hierarki DOM dokumen yang masuk dapat berdampak besar pada latensi. Kami harus menyeimbangkan kompromi ini dengan tepat dan hanya merender pemblokiran pada elemen yang dirender sangat awal dalam siklus proses halaman.

<!-- Link tag in the <head> of the incoming document -->
<link blocking="render" href="#target-id" rel="expect">

<!-- Element you want to animate in the <body> of the incoming document -->
<div id="target-id">
  some content
</div>

Dalam beberapa kasus, tidak cukup hanya dengan menentukan elemen mana yang Anda blokir rendering-nya. Perangkat atau koneksi tertentu masih akan mengalami latensi tambahan meskipun pemblokiran rendering terjadi pada elemen di dekat awal hierarki DOM. Untuk menangani kasus tersebut, kami menulis skrip timer watchdog untuk menghapus HTMLLinkElement setelah jangka waktu tertentu berlalu untuk memaksa rendering dokumen yang masuk tidak diblokir.

Cara mudah untuk melakukannya adalah sebagai berikut:

function unblockRendering() {
  const renderBlockingElements = document.querySelectorAll(
    'link[blocking=render]',
  );
  for (const element of renderBlockingElements) {
    element.remove();
  }
}

const timeToUnblockRendering = t - performance.now();

if (timeToUnblockRendering > 0) {
  setTimeout(unblockRendering, timeToUnblockRendering);
} else {
  unblockRendering();
}

Batasan cakupan

Masalah lain yang kami temui adalah aturan transisi tampilan lintas dokumen navigation: auto terjadi di tingkat global dalam dokumen. Tidak ada cara bawaan untuk mencakup pengaktifan transisi tampilan lintas dokumen hanya ke target klik tertentu. Karena ini adalah perubahan yang sangat besar, kami tidak dapat mengaktifkan transisi tampilan lintas dokumen pada 100% navigasi di Google Penelusuran. Kami memerlukan cara untuk mengaktifkan atau menonaktifkan transisi tampilan lintas dokumen secara dinamis, bergantung pada fitur yang digunakan pengguna. Dalam kasus ini, kami hanya mengaktifkannya untuk perubahan mode ke dan dari Mode AI. Kami melakukannya dengan memperbarui aturan @navigasi secara terprogram, bergantung pada target mana yang diklik atau diketuk.

Cara untuk mengalihkan aturan @transisi tampilan adalah sebagai berikut:

let viewTransitionAtRule: HTMLElement | undefined;
const DISABLED_VIEW_TRANSITION = '@view-transition{navigation:none;}';
const ENABLED_VIEW_TRANSITION = '@view-transition{navigation:auto;}';

function getVtAtRule(): HTMLElement {
  if (!viewTransitionAtRule) {
    viewTransitionAtRule = document.createElement('style');
    document.head.append(viewTransitionAtRule);
  }
  return viewTransitionAtRule;
}

function disableVt() {
  getVtAtRule().textContent = DISABLED_VIEW_TRANSITION;
}

function enableVt() {
  getVtAtRule().textContent = ENABLED_VIEW_TRANSITION;
}

Jank dan animasi yang digabungkan

Beberapa animasi yang dibuat secara otomatis pada elemen semu transisi tampilan menyebabkan penurunan frame pada perangkat lama, sehingga merusak pengalaman yang lancar dan bersih yang ingin kami tawarkan kepada pengguna. Untuk meningkatkan performa animasi, kami menulis ulang animasi tersebut menggunakan teknik animasi yang dapat berjalan di compositor. Kami dapat melakukannya dengan memeriksa keyframe untuk mendapatkan dimensi elemen semu snapshot sebelum dan sesudah, serta menggunakan matematika matriks untuk menulis ulang keyframe yang sesuai. Contoh berikut menunjukkan cara mengambil animasi untuk setiap elemen semu transisi tampilan:

const pseudoElement = `::view-transition-group(${name})`;
const animation = document
  .getAnimations()
  .find(
    (animation) =>
      (animation.effect as KeyframeEffect)?.pseudoElement === pseudoElement,
  );

Baca selengkapnya tentang penulisan keyframe transisi tampilan berperforma tinggi di Transisi Tampilan yang Diterapkan: Menangani Blok yang Berisi Snapshot.

Hal lain yang perlu diperhatikan

Salah satu masalah yang lebih menonjol adalah bahwa pemberian tag pada elemen dengan properti CSS view-transition-name memengaruhi konteks penumpukan (Spesifikasi transisi tampilan: Bagian 2.1.1). Hal ini menjadi sumber beberapa bug yang mengharuskan z-index elemen penampung dimodifikasi.

Hal lain yang perlu diperhatikan adalah Anda mungkin tidak ingin menambahkan nilai view-transition-name ke elemen secara default. Ada banyak orang yang mengerjakan Google Penelusuran. Untuk mencegah nilai view-transition-name yang ditetapkan tim kami pada elemen bertentangan dengan nilai yang mungkin digunakan orang dari tim lain, kami menggunakan jenis transisi tampilan untuk menambahkan properti view-transition-name secara bersyarat hanya saat jenis transisi tampilan tertentu aktif.

Contoh CSS untuk menambahkan view-transition-name dari the-element ke elemen hanya saat jenis transisi tampilan ai-mode aktif:

html:active-view-transition-type(ai-mode) {
  #target {
    view-transition-name: the-element;
  }
}

Setelah menerapkan aturan CSS ini untuk semua transisi tampilan, Anda dapat mengubah jenis transisi tampilan saat ini secara dinamis untuk navigasi apa pun selama peristiwa pageswap dan pagereveal.

Contoh memperbarui jenis transisi tampilan ke ai-mode selama peristiwa pageswap.

function updateViewTransitionTypes(
  event: ViewTransitionEvent,
  types: string[],
): void {
  event.viewTransition.types.clear();
  for (const type of types) {
    event.viewTransition.types.add(type);
  }
}

window.addEventListener(
  'pageswap',
  (e) => {
    updateViewTransitionTypes(
      e as ViewTransitionEvent,
      ['ai-mode'],
    );
  }
);

Dengan cara ini, kita mencegah konflik penamaan dan tidak mengambil snapshot elemen yang tidak perlu diambil sebagai bagian dari beralih ke dan dari Mode AI.

Terakhir, masalah konteks penumpukan hanya akan muncul selama transisi tampilan. Untuk mengatasi masalah tersebut, kita dapat menargetkan indeks z dari elemen semu yang dihasilkan, bukan mengubah indeks z elemen asli secara sewenang-wenang hanya untuk mengatasi masalah ini saat menggunakan transisi tampilan.

::view-transition-group(the-element) {
  z-index: 100;
}

Langkah berikutnya

Kami berencana menggunakan transisi tampilan lintas dokumen untuk Google Penelusuran, termasuk integrasi dengan Navigation API setelah tersedia di seluruh browser. Nantikan info terbaru untuk melihat apa yang akan kami bangun selanjutnya.

Studi Kasus: Cara Google membuat pengalaman terhubung untuk Mode AI barunya menggunakan transisi tampilan Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.