View Transitions API: Transisi Halaman Web Lebih Halus, Pengalaman Pengguna Makin Mantap!

Halaman 1

Ke Halaman 2

```

Halaman 2 (page2.html):

```html

Halaman 2

Kembali ke Halaman 1

```

Pada contoh ini, kita menggunakan `document.startViewTransition()` untuk membungkus perubahan `window.location.href`. Browser secara otomatis akan membuat transisi antara kedua halaman tersebut. Secara default, browser akan memberikan efek fade yang sederhana.

Kustomisasi Transisi dengan CSS

Kekuatan sebenarnya dari View Transitions API terletak pada kemampuannya untuk dikustomisasi menggunakan CSS. Anda dapat mengontrol berbagai aspek transisi, seperti durasi, easing function, dan animasi individual elemen.

Beberapa pseudo-elements CSS yang berguna untuk kustomisasi transisi:

• ::view-transition: Mencakup seluruh transisi.
• ::view-transition-group(root): Mencakup seluruh halaman.
• ::view-transition-image-pair(root): Mencakup gambar dari state awal dan akhir halaman.
• ::view-transition-old(root): Mencakup state awal halaman.
• ::view-transition-new(root): Mencakup state akhir halaman.

Sebagai contoh, untuk mengubah durasi dan easing function transisi, Anda dapat menambahkan CSS berikut:

```css ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.8s; animation-timing-function: ease-in-out; } ```

Anda juga dapat membuat transisi yang lebih kompleks dengan menganimasikan properti CSS lainnya, seperti `transform`, `opacity`, dan `scale`. Misalnya, untuk membuat efek fade-in yang lebih halus pada halaman baru, Anda dapat menggunakan CSS berikut:

```css ::view-transition-new(root) { animation: fadeIn 0.8s ease-in-out forwards; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } ```

Dengan CSS, Anda memiliki kendali penuh atas bagaimana transisi halaman Anda terlihat dan terasa.

Contoh Transisi yang Lebih Kompleks

Mari kita lihat contoh yang lebih kompleks yang melibatkan transisi antara dua state di dalam halaman yang sama. Anggaplah kita memiliki daftar item, dan ketika kita mengklik sebuah item, detail item tersebut ditampilkan dengan transisi yang halus.

HTML:

```html

Daftar Item

Item 1

Item 2

Item 3