CSS View Transitions API: Web''de Native Geçiş Animasyonları

Merhaba,

CSS View Transitions API, web'de sayfa geçişlerini native uygulama deneyimine yaklaştıran yeni bir tarayıcı API'si. Single Page Application'larda ve Multi Page Application'larda akıcı animasyonlar için JavaScript kütüphanelerine olan bağımlılığı azaltıyor. Gelin inceleyelim arkadaşlar.

View Transitions API Nedir?

Tarayıcının built-in geçiş animasyon sistemi. DOM değişikliklerini (sayfa geçişleri, liste güncellemeleri, modal açılışları) JavaScript animation biblioteklerine gerek kalmadan animasyonlu yapmanızı sağlıyor.

Temel Kullanım

document.startViewTransition(callback) ile çalışıyor. Callback içinde DOM'u güncelliyorsunuz, tarayıcı eski ve yeni durumun ekran görüntüsünü alıp aralarında cross-fade animasyonu yapıyor. Sadece birkaç satır kod ile sayfa geçişlerinde tüm içerik yumuşak geçiş yapıyor.

view-transition-name ile Paylaşımlı Elementler

En güçlü özellik bu. Bir liste öğesinden detay sayfasına geçişte, listeleki kart ile detay sayfasındaki başlık aynı view-transition-name değerini paylaşırsa tarayıcı ikisi arasında "hero animation" yapıyor. Eski konum ve boyuttan yeni konum ve boyuta doğal bir geçiş. Native mobil uygulamalardaki shared element transition'ın web versiyonu.

CSS ile Özelleştirme

Animasyonlar CSS pseudo-elementler ile özelleştirilebiliyor: ::view-transition-old(root) ve ::view-transition-new(root). Kendi giriş/çıkış animasyonlarınızı tanımlayabilirsiniz. Cross-fade yerine slide, scale veya özel animasyon.

Multi Page Application Desteği

Chrome 126 ile MPA (çok sayfalı uygulama) desteği geldi. @view-transition { navigation: auto; } CSS kuralıyla sayfalar arası geçişler otomatik animasyonlanıyor. JavaScript gerekmeden! Bu özellik web framework'lerine ve SPA'ya olan bağımlılığı azaltacak potansiyele sahip.

Tarayıcı Desteği

Chrome ve Edge'de tam destek var. Firefox hâlâ geliştirme aşamasında (2024 sonu tahmini). Safari için zaman çizelgesi belirsiz. Progressive enhancement yaklaşımıyla bugün kullanılabilir desteklemeyen tarayıcılarda animasyon olmadan çalışır, destekleyende animasyonlu.

Neden Önemli?

Web ve native uygulama arasındaki deneyim farkını kapatıyor. Framer Motion, React Spring gibi kütüphanelere olan ihtiyacı azaltıyor. Daha az JavaScript, daha hızlı yükleme, daha iyi Core Web Vitals.

Sonuç

CSS View Transitions API, modern web geliştirmenin en heyecan verici yeni özelliklerinden biri. Progressive enhancement ile bugün kullanmaya başlayabilirsiniz :)

İyi Günler Dilerim,