📛 View Transitions API

Panduan lengkap View Transitions API untuk animasi transisi yang mulus

📌 Elements

💡 View Transitions Fundamental

View Transitions API memungkinkan animasi transisi mulus antara berbagai tampilan/tampilan situs web dengan kontrol penuh melalui CSS dan JavaScript.

view-transitions.css
/* Basic View Transition */
html {
  view-transition-name: none;
}

/* Named transition for specific element */
.header {
  view-transition-name: header;
}

/* Transition animation */
::view-transition-old(root) {
  animation: fade-out 0.3s ease forwards;
}

::view-transition-new(root) {
  animation: fade-in 0.3s ease forwards;
}

📝 Penjelasan Detail:

â€ĸ view-transition-name - Mengidentifikasi elemen untuk animasi transisi
â€ĸ ::view-transition-old() - Mewakili tampilan lama yang keluar
â€ĸ ::view-transition-new() - Mewakili tampilan baru yang masuk
â€ĸ document.startViewTransition() - API JavaScript untuk memulai transisi

🛠ī¸ Features

view-features.css
/* Basic page transition */
::view-transition-old(root) {
  animation: fade-out 0.3s ease;
}

::view-transition-new(root) {
  animation: fade-in 0.3s ease;
  animation-delay: 0.3s;
}

/* Custom element transition */
.main-image {
  view-transition-name: main-image;
}

::view-transition-group(main-image) {
  animation-duration: 0.5s;
}

ℹī¸ Browser Support

View Transitions API didukung di Chrome 111+, Edge 111+, Opera 97+. Firefox dan Safari belum mendukung secara native (per 2023).

📊 Basic Tables

view-values.css
/* view-transition-name Values */
none /* Default, tidak ada transisi */
<custom-ident> /* Nama custom untuk elemen */

/* Pseudo-elements untuk animasi */
::view-transition /* Root pseudo-element */
::view-transition-group() /* Grup elemen terkait */
::view-transition-image-pair() /* Pasangan old/new */
::view-transition-old() /* State sebelumnya */
::view-transition-new() /* State baru */

/* Jenis Transisi Umum */
fade /* Memudar */
slide /* Geser */
scale /* Perubahan ukuran */

📝 Penjelasan Detail:

â€ĸ View Transition Groups - Mengelompokkan elemen terkait dalam transisi
â€ĸ Image Pairs - Menghubungkan state old dan new dari elemen
â€ĸ Custom Animations - Bisa menggunakan keyframes CSS standar
â€ĸ Fallbacks - Selalu sediakan fallback untuk browser yang tidak mendukung

🚀 Advanced Table

advanced-view.css
/* Multiple named transitions */
.product-image {
  view-transition-name: product-image;
}

/* Custom animation */
::view-transition-group(product-image) {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Different animations for in/out */
::view-transition-old(product-image) {
  animation: slide-out 0.5s ease;
}

::view-transition-new(product-image) {
  animation: slide-in 0.5s ease;
  animation-delay: 0.1s;
}

/* Zustand management */
::view-transition-old(details) {
  mix-blend-mode: normal;
}

ℹī¸ Advanced Support

Fitur lanjutan seperti multiple named transitions dan animation customization membutuhkan Chrome 115+ dengan flag experimental Web Platform Features.

💡 Pro Tips

đŸŽ¯ Best Practices

Gunakan View Transitions untuk meningkatkan UX, bukan sekadar efek visual. Pastikan konten tetap mudah diakses dan performa tidak terganggu.

best-practices.css
/* ✅ Good - Simple and effective */
::view-transition-old(root) {
  animation: fade-out 0.2s ease;
}

::view-transition-new(root) {
  animation: fade-in 0.2s ease;
  animation-delay: 0.2s;
}

/* ✅ Good - Named element transition */
.hero-image {
  view-transition-name: hero;
  contain: paint;
}

/* ❌ Avoid - Overusing transitions */
* {
  view-transition-name: transition-all;
}

/* ❌ Avoid - Long animations */
::view-transition-old(root) {
  animation: fancy-out 2s;
}

📝 Penjelasan Detail:

â€ĸ Gunakan dengan bijak - Hanya untuk transisi yang meningkatkan UX
â€ĸ Durasi pendek - 200-500ms ideal untuk kebanyakan kasus
â€ĸ Optimasi performa - Hindari animasi yang berat/complex
â€ĸ Sediakan fallback - Pastikan situs tetap berfungsi tanpa transisi
â€ĸ Test di berbagai device - Animasi mungkin berbeda di perangkat berbeda