View Transitions API'si

Görünüm Geçişleri API'si (Chrome 111+), bir sayfanın farklı durumları arasında veya sayfa gezintileri arasında akıcı, animasyonlu geçişler sağlar. Önceki ve sonraki ekran görüntülerini yakalar ve CSS animasyonlarını kullanarak aralarında dönüşüm yapar — web'de uygulama benzeri geçişler sağlar.

Bir DOM güncellemesini document.startViewTransition(() => updateDom()) ile sararak aynı sayfa içinde geçiş başlatın. Tarayıcı eski durumu yakalar, güncellemeyi çalıştırır, yeni durumu yakalar ve ikisi arasında otomatik olarak çapraz geçiş yapar.

Herhangi bir CSS olmadan Görünüm Geçişleri, eski ve yeni sayfa durumları arasında basit bir çapraz geçiş gerçekleştirir. Bu tek JavaScript satırı, daha önce karmaşık CSS animasyonu düzenlemesi veya özel bir animasyon kitaplığı gerektiren şık bir geçiş ekler.

API dört sözde öğe sunar: ::view-transition (kök katmanı), ::view-transition-old(root) (eski sayfanın ekran görüntüsü), ::view-transition-new(root) (yeni sayfanın ekran görüntüsü) ve ::view-transition-image-pair(root). Bunları CSS animasyonlarıyla özelleştirin.

Geçiş boyunca varlığını sürdüren bir öğeye view-transition-name: hero-image atayın. API, bu öğeyi eski konumundan ve boyutundan yeni konumuna ve boyutuna dönüştürerek otomatik olarak akıcı bir öğe düzeyinde animasyon oluşturur.

Sözde öğelerde özel ana kareler kullanarak varsayılan çapraz geçişi değiştirin: ileri gezinti için sağdan, geri gezinti için soldan kayarak gelmesini sağlayın. ::view-transition-new(root) ve ::view-transition-old(root) öğelerini @keyframes ile hedefleyin.

Belgeler arası Görünüm Geçişleri (Chrome 126+), çok sayfalı uygulamalarda tam sayfa gezintileri arasındaki geçişleri canlandırır. CSS'e @view-transition { navigation: auto; } ekleyin — tarayıcı, HTML sayfaları arasındaki geçişi JavaScript gerekmeden otomatik olarak yönetir.

Vestibüler bozukluğu olan kullanıcılar yoğun hareket içeren geçişler yaşamamalıdır. İşlevsel DOM güncellemesini korurken hareketin azaltılmasını tercih eden kullanıcılar için özel animasyonları devre dışı bırakmak amacıyla geçiş animasyonlarını @media (prefers-reduced-motion: no-preference) içine alın.

React Router v6.4+, Vue Router ve Astro, Görünüm Geçişlerini destekler. Çerçeveler, rota değişikliklerini otomatik olarak startViewTransition ile sarar. Gezinti ve düzen kabukları gibi kalıcı öğelerde geçiş adını kullanarak rota başına geçiş stillerini yapılandırın.

Görünüm Geçişleri sayfanın ekran görüntülerini yakalar; bu işlem karmaşık düzenlerde maliyetli olabilir. Çok sayıda birleştirilmiş katmana sahip büyük sayfalarda yakalama sırasında takılmalar görülebilir. Geçiş süresini 300 ms'nin altında tutun ve son derece karmaşık alt ağaçlarda geçiş yapmaktan kaçının.

Kullanmadan önce API'nin kullanılabilirliğini kontrol edin: if (!document.startViewTransition) { updateDom(); return; }. Geri dönüş, DOM'u animasyon olmadan normal şekilde günceller. Görünüm Geçişleri aşamalı geliştirmedir — uygulama bunlar olmadan da çalışır; desteklenen yerlerde yalnızca deneyimi iyileştirir.

Bir öğedeki geçiş adı, Görünüm Geçişi sırasında neyi mümkün kılar?

Görünüm Geçişleri API'si, en az kodla DOM durumları veya sayfa gezintileri arasında çapraz geçiş ve biçim değişikliği animasyonları sağlar. Adlandırılmış geçiş öğeleri otomatik olarak biçim değiştirir; özel sözde öğe animasyonları varsayılan çapraz geçişin yerini alır. Azaltılmış hareket tercihlerine saygı gösterin ve desteklenmeyen tarayıcılar için aşamalı geliştirme kullanın.