Transisi Antar-Tampilan (View Transition API) dan CSS Anchor Positioning

1. Mengenal View Transition API: Animasi Perubahan State Tanpa Rumit

Pernahkah Anda ingin menganimasikan perubahan tata letak—misalnya saat daftar kartu disaring berdasarkan kategori, saat pengguna berpindah tab di dalam halaman, atau saat gambar kecil di katalog membesar menjadi gambar sampul di halaman rincian?

Dulu, menganimasikan perubahan struktur DOM sangatlah sulit karena Anda harus menyimpan koordinat lama, mengubah DOM, lalu menghitung balik selisih posisinya (teknik FLIP).

Kini, View Transition API menyelesaikan semuanya secara otomatis:

1. Peramban memotret tampilan lama (old state snapshot).
2. Kode Anda memperbarui DOM (atau berpindah halaman).
3. Peramban memotret tampilan baru (new state snapshot), lalu **secara otomatis menganimasikan transisi pudar (cross-fade) sekaligus pergeseran posisi dan ukuran (morphing)** di antara keduanya!

A. Transisi di Dalam Halaman Tunggal (SPA / Manipulasi DOM)

Cukup bungkus fungsi pembaruan DOM Anda di dalam document.startViewTransition(() => { ... }) (dengan pemeriksaan progresif agar tetap berjalan lancar di semua peramban):

function perbaruiTampilanKatalog(kategoriBaru) {
  // Fallback aman jika peramban belum mendukung startViewTransition
  if (!document.startViewTransition) {
    renderKartu(kategoriBaru);
    return;
  }

  // Peramban otomatis menganimasikan perpindahan dari tampilan lama ke tampilan baru!
  document.startViewTransition(() => {
    renderKartu(kategoriBaru);
  });
}

B. Transisi Lintas Halaman Murni CSS (@view-transition)

Bahkan untuk situs multi-halaman klasik (Multi-Page Application / MPA seperti halaman artikel statis di Kodeloka!), Anda kini dapat mengaktifkan transisi mulus saat pengguna berpindah halaman dalam satu origin yang sama cukup dengan menambahkan aturan @view-transition di berkas CSS kedua halaman (didukung Chrome/Edge 126 dan Safari 18.2; Firefox belum mendukungnya, sehingga di sana halaman tetap berpindah seperti biasa tanpa animasi):

@view-transition {
  navigation: auto;
}

/* Jika Anda memberi view-transition-name yang unik pada elemen yang sama
   di halaman katalog dan halaman detail, peramban otomatis menganimasikan
   perpindahan posisi dan ukuran elemen tersebut! */
.kartu-php__ikon {
  view-transition-name: ikon-kelas-php;
}

/* Tetap hormati pengguna yang sensitif terhadap gerakan! */
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

2. CSS Anchor Positioning: Menambatkan Popover & Tooltip Tanpa Pustaka JS

Ketika Anda membuka sebuah <div popover> (dari Pelajaran 12 HTML), secara bawaan elemen popover muncul di tengah layar karena berada di Top Layer. Jika Anda ingin membuat menu tarik-turun (dropdown) atau tooltip yang menempel tepat di bawah tombol pemicunya, dulu Anda harus menghitung koordinat getBoundingClientRect() lewat JavaScript dan menangani bagaimana jika menu tersebut mentok di tepi bawah layar!

Spesifikasi baru CSS Anchor Positioning mengizinkan Anda menambatkan posisi sebuah elemen langsung ke elemen jangkar (anchor) menggunakan CSS murni:

1. Pada Tombol Pemicu (Jangkar): Beri nama jangkar dengan anchor-name: --tombol-profil;.
2. Pada Elemen Popover / Tooltip: Kaitkan ke jangkar tersebut dengan position-anchor: --tombol-profil;, lalu posisikan menggunakan fungsi anchor() atau properti position-area!

/* 1. Tandai tombol sebagai titik jangkar bernama --jangkar-menu */
#tombol-menu-profil {
  anchor-name: --jangkar-menu;
}

/* 2. Kaitkan panel popover ke jangkar tersebut */
#panel-menu-profil[popover] {
  margin: 0;
  position: fixed;
  position-anchor: --jangkar-menu;

  /* Tempatkan bagian atas panel tepat di bawah bagian bawah tombol (+ jarak 0.5rem),
     dan sejajarkan tepi kirinya dengan tepi kiri tombol! */
  inset-block-start: calc(anchor(bottom) + 0.5rem);
  inset-inline-start: anchor(left);

  /* Otomatis balikkan posisi ke atas tombol jika ruang di bawah layar tidak cukup! */
  position-try-fallbacks: flip-block;
}

Perhatikan betapa hebatnya position-try-fallbacks: flip-block;: jika tombol berada di bagian paling bawah layar sehingga menu tidak muat ditampilkan ke bawah, peramban secara otomatis membalikkan posisi menu ke atas tombol tanpa satu baris JavaScript pun!

(Catatan Dukungan Peramban: CSS Anchor Positioning berstatus Baseline Newly Available sejak Januari 2026, didukung di Chrome/Edge 125+, Firefox 147+, dan Safari 26+; peramban yang lebih lama belum mendukungnya, jadi gunakan bersama @supports (anchor-name: --a) sebagai peningkatan progresif di atas posisi popover bawaan).

Latihan Praktik: Penyaringan Katalog dengan View Transition dan Menu Terjangkar

Buatlah berkas view-transition.html dan vt.css:

1. Buat daftar 4 kartu dengan tombol filter kategori (Semua, Frontend, Backend) yang memanggil document.startViewTransition() saat menyembunyikan/menampilkan kartu.
2. Berikan view-transition-name yang unik pada masing-masing kartu (kartu-1, kartu-2, dst.) sehingga kartu yang tersisa tampak bergeser merapat secara mulus.
3. Buat sebuah tombol dan <div popover> yang menggunakan @supports (anchor-name: --menu) untuk menempel tepat di bawah tombolnya.