CSS View Transitions: JavaScript'siz Sayfa Geçiş Animasyonları
CSS'in @view-transition kuralıyla JavaScript router olmadan sayfa geçiş animasyonları nasıl kurulur; karşılaşılan tuzaklar ve çözümleri anlatılıyor.
Bir blog yazarı, sayfa geçişlerini eskiden pjax veya SPA router'larıyla taklit etmek yerine, tarayıcının yerleşik cross-document view transitions özelliğini nasıl kullandığını anlatıyor. Tek bir @view-transition CSS bloğu ile, JavaScript veya fetch tabanlı bir çözüme ihtiyaç kalmadan gerçek sayfa navigasyonları animasyonlu hale geliyor; Chrome, Edge ve Safari destekliyor, Firefox ise sorunsuzca göz ardı ediyor.
Yazar, view-transition-name özelliğiyle sayfa düzenindeki sütunları ve kenar çubuğu widget'larını ayrı ayrı adlandırarak, tüm sayfanın tek parça crossfade yapması yerine orta sütunun kayarak geçiş yapmasını sağlıyor. Animasyon süreleri, z-index sıralaması ve mix-blend-mode gibi detaylarla geçişlerin doğru görünmesi sağlanıyor.
Metinde ayrıca iki yaygın tuzağa dikkat çekiliyor: aspect-ratio'nun sabit bir genişlik olmadan yükseklik hesaplayamaması ve fr birimiyle tanımlanan grid sütunlarının komşu içerik değiştiğinde hafifçe kayması, bu da geçiş sırasında görsel bir sıçramaya yol açıyor. Yaklaşımın en büyük avantajı, hiçbir fallback veya @supports kontrolü gerektirmemesi; desteklenmeyen tarayıcılarda sistem sorunsuzca normal navigasyona geri dönüyor ve prefers-reduced-motion tercihine otomatik olarak uyuyor.