View Transitions API Nedir? Web Sayfalarında Native Benzeri Geçişler

Bir web arayüzünde liste görünümünden ürün detayına, sekmeler arasında ya da iki ayrı sayfa arasında geçerken içerik bir anda değişirse kullanıcı bulunduğu bağlamı kaybedebilir. Geleneksel çözüm, eski ve yeni arayüz durumlarını aynı anda DOM içinde tutmak, konumlarını hesaplamak ve JavaScript ile karmaşık animasyonlar yönetmektir. View Transitions API, bu işi tarayıcının eski ve yeni görünümden anlık görüntüler alarak gerçekleştirmesine imkân verir.

Bu rehber, View Transitions API'nin ne olduğunu; aynı belge ve belgeler arası geçişlerin nasıl ayrıldığını; paylaşılan öğe animasyonlarının nasıl kurulduğunu ve özelliğin hangi durumlarda kullanılmaması gerektiğini açıklar. Odak, genel animasyon tasarımı değil, arayüz durumları arasındaki görsel sürekliliği web platformunun yerleşik araçlarıyla kurmaktır.

View Transitions API nedir?

View Transitions API, bir web sayfasının eski görünümü ile yeni görünümü arasında tarayıcı tarafından yönetilen animasyonlu geçişler oluşturmayı sağlayan web platformu özelliğidir. Tek sayfalı uygulamalarda DOM güncellemesi sırasında, çok sayfalı yapılarda ise aynı origin üzerindeki belge navigasyonlarında kullanılabilir. MDN, API'nin hem SPA içindeki görünüm değişikliklerini hem de MPA sayfaları arasındaki navigasyonları kapsadığını belirtir MDN View Transition API.

API'nin temel değeri, geliştiricinin eski ve yeni arayüz durumlarını aynı anda görünür DOM içinde yönetmek zorunda kalmamasıdır. Tarayıcı eski görünümün görsel temsilini yakalar, arayüz güncellenir ve yeni görünümün temsilini oluşturur. Ardından iki durum arasındaki geçiş CSS animasyonlarıyla yürütülür. Bu yaklaşım, web tasarım sürecinde sayfalar arası bağlamı korumaya yardımcı olabilir; ancak kötü tasarlanmış bir geçişi otomatik olarak iyi bir kullanıcı deneyimine dönüştürmez.

View transition süreci teknik olarak nasıl çalışır?

Bir geçiş başlatıldığında tarayıcı önce mevcut görünümün anlık görüntüsünü alır. Aynı belge içi kullanımda geliştiricinin verdiği güncelleme fonksiyonu çalıştırılır ve DOM yeni duruma geçirilir. Ardından tarayıcı yeni görünümün anlık görüntüsünü oluşturur. Eski ve yeni görüntüler, gerçek DOM'un üzerinde geçici bir sözde öğe ağacına yerleştirilir.

Varsayılan davranış, kök görünümün eski hâlini soldururken yeni hâlini görünür kılan basit bir cross-fade animasyonudur. Belirli öğelere view-transition-name verildiğinde bu öğeler kök görüntüden ayrı yakalanabilir. Böylece bir kartın detay sayfasında büyük bir kapak görseline dönüşmesi, sekme göstergesinin yeni konuma kayması veya sıralanan liste öğelerinin yer değiştirmesi gibi geçişler oluşturulabilir.

1. Eski görünümde geçişe katılacak öğeler yakalanır.
2. DOM güncellemesi veya sayfa navigasyonu gerçekleşir.
3. Yeni görünümde eşleşen öğeler yakalanır.
4. Tarayıcı geçici view transition sözde öğelerini üretir.
5. Varsayılan ya da geliştirici tarafından tanımlanan CSS animasyonları çalışır.
6. Animasyon tamamlandığında geçici katmanlar kaldırılır ve gerçek sayfa görünmeye devam eder.

W3C'nin Level 1 spesifikasyonu aynı belge içindeki durum değişikliklerini, Level 2 ise belgeler arası navigasyonları tanımlar W3C CSS View Transitions Level 1 W3C CSS View Transitions Level 2. Bu ayrım, uygulama mimarisine göre hangi başlatma yönteminin kullanılacağını belirler.

Aynı belge ve belgeler arası geçişlerin farkı nedir?

Same-document ve cross-document yapılar aynı anlık görüntü ve CSS animasyonu mantığını kullanır. Fakat başlangıç noktaları farklıdır. SPA senaryosunda JavaScript, DOM değişikliğinin ne zaman yapılacağını tarayıcıya bildirir. MPA senaryosunda normal bağlantı navigasyonu korunur; geçiş, iki belgenin de destek vermesi hâlinde otomatik devreye girer.

SPA içinde aynı belge geçişi nasıl başlatılır?

Aynı belge içindeki temel kullanım, arayüzü değiştiren fonksiyonu document.startViewTransition() metoduna callback olarak vermektir. Örneğin ürün listesini grid görünümünden liste görünümüne çeviren updateLayout() fonksiyonu, destekleyen tarayıcıda document.startViewTransition(() => updateLayout()) biçiminde çalıştırılabilir. Tarayıcı özelliği desteklemiyorsa updateLayout() doğrudan çağrılır ve işlev animasyonsuz devam eder.

Chrome'un resmî rehberi, fallback kontrolünde document.startViewTransition özelliğinin bulunup bulunmadığının test edilmesini ve destek yoksa DOM güncellemesinin normal biçimde çalıştırılmasını önerir Chrome Same-Document View Transitions. Böylece animasyon uygulamanın çalışması için zorunlu bağımlılık hâline gelmez.

Doğru progressive enhancement yaklaşımında kullanıcı, API desteklenmediğinde animasyonu kaybeder; içeriği, navigasyonu veya işlemi kaybetmez.

Güncelleme callback'i neden kısa tutulmalıdır?

Callback, yeni görünümün hazırlanması için gereken DOM değişikliğini yapmalıdır. Uzun ağ isteklerini, ağır hesaplamaları veya belirsiz süreli işleri doğrudan callback içinde bekletmek geçişin başlamasını geciktirebilir. Gerekli veri mümkünse önceden alınmalı; geçiş sırasında yalnızca görünüm durumu güncellenmelidir. Veri henüz hazır değilse kullanıcıya yanıltıcı bir animasyon göstermek yerine önce yükleme durumunu yönetmek daha güvenlidir.

Çok sayfalı sitelerde cross-document geçiş nasıl açılır?

Çok sayfalı bir yapıda JavaScript ile startViewTransition() çağırmak gerekmez. Mevcut ve hedef belgenin stil dosyalarında @view-transition kuralı bulunmalı ve navigation değeri auto olarak ayarlanmalıdır. Kullanıcı aynı origin içindeki uygun bir bağlantıya gittiğinde destekleyen tarayıcı eski ve yeni belge arasında geçiş oluşturabilir.

MDN, cross-document geçişler için iki sayfanın aynı origin üzerinde bulunması ve her iki belgenin de opt-in yapması gerektiğini açıklar MDN View Transition Kullanımı. Origin; protokol, alan adı ve port bileşimidir. Bu nedenle aynı şirketin farklı subdomainleri otomatik olarak aynı origin kabul edilmez.

@view-transition özelliği, 31 Temmuz 2026 itibarıyla MDN tarafından Limited availability olarak işaretlenmektedir MDN @view-transition. Bu nedenle çok sayfalı sitelerde normal bağlantı yapısı, doğru URL'ler ve sunucu tarafı navigasyon bozulmamalıdır. Animasyon yalnızca destekleyen istemcilerde ek bir katman olarak çalışmalıdır.

Paylaşılan öğe geçişleri nasıl oluşturulur?

Varsayılan kök geçiş bütün sayfayı tek görüntü olarak cross-fade eder. Belirli bir öğenin eski ve yeni görünümde aynı görsel nesne olarak algılanması isteniyorsa iki durumdaki öğelere aynı view-transition-name değeri verilir. Örneğin liste kartındaki ürün görseli ile detay sayfasındaki büyük ürün görseli product-image adını taşıyabilir. Tarayıcı bu iki görüntü arasında konum ve boyut değişimini canlandırır.

Aynı anda görüntülenen iki farklı öğenin aynı transition adına sahip olmaması gerekir. MDN'ye göre aynı isim birden fazla render edilen öğede kullanılırsa ViewTransition.ready sözü reddedilebilir ve geçiş atlanır MDN view-transition-name. Dinamik listelerde isimlerin veri kimliğiyle eşleştirilmesi veya aynı belge geçişlerinde match-element yaklaşımının değerlendirilmesi bu nedenle önemlidir.

• Ürün kartı → ürün detayı: Görsel ve başlık için ayrı transition adları kullanılabilir.
• Galeri küçük görseli → lightbox: Seçilen görsel büyürken diğer öğeler kök geçişte kalabilir.
• Sekme göstergesi: Aktif çizgi veya arka plan yeni sekmenin altına kayabilir.
• Liste yeniden sıralama: Öğeler yeni konumlarına akıcı biçimde taşınabilir.
• Dashboard görünümü: Kart, ayrıntılı panel hâline genişleyebilir.

Bu tür geçişler, profesyonel bir UI/UX tasarım kararının görsel uygulamasıdır. Hangi öğenin eşleştirileceği, animasyon süresi ve hareket yönü içerik hiyerarşisini desteklemelidir; yalnızca teknik olarak yapılabildiği için her öğe ayrı animasyona alınmamalıdır.

Animasyonlar CSS ile nasıl özelleştirilir?

View transition sırasında tarayıcı ::view-transition-old(), ::view-transition-new(), ::view-transition-group() ve ilgili diğer sözde öğeleri üretir. Varsayılan cross-fade yeterli değilse CSS animation özellikleri bu katmanlara uygulanabilir. Eski görüntü dışarı kayarken yeninin içeri girmesi, opacity ve transform değerlerinin birlikte kullanılması veya belirli bir öğenin farklı süreyle hareket etmesi mümkündür.

Güvenli başlangıç, kısa ve sade bir geçiştir. Hareketin yönü navigasyon mantığıyla uyumlu olmalıdır. İleri adımda içerik soldan sağa, geri adımda ters yönde hareket edebilir; ancak bu yönler kullanıcının dil ve arayüz düzeniyle çelişmemelidir. Animasyon süresi uzadıkça sistem gerçekte hızlı olsa bile arayüz yavaş hissedilebilir.

Progressive enhancement nasıl uygulanmalıdır?

View Transitions API ile geliştirilen arayüz, destek olmadığı durumda aynı görevi animasyonsuz tamamlamalıdır. Bu ilke hem same-document hem de cross-document kullanım için geçerlidir. SPA içinde feature detection yapılır; MPA içinde ise bağlantılar normal href değerleriyle çalışmaya devam eder. Geçiş kodu, yönlendirme ya da veri güncelleme işleminin tek yolu olmamalıdır.

1. Önce animasyonsuz temel akışı tamamlayın.
2. Same-document kullanımda API desteğini kontrol edin.
3. Cross-document kullanımda yalnızca aynı origin ve uygun navigasyonları hedefleyin.
4. Transition adı verilen öğelerin her görünümde benzersiz olduğunu doğrulayın.
5. prefers-reduced-motion tercihinde animasyonu kapatın veya belirgin ölçüde azaltın.
6. Eski tarayıcılarda içerik, butonlar ve bağlantıların normal çalıştığını test edin.
7. Geçiş başarısız olduğunda uygulamanın fonksiyonel durumunun bozulmadığını doğrulayın.

Uygulama kodunun mimari olarak temiz tutulması da önemlidir. Görünüm güncelleme fonksiyonu, animasyon API'sinden bağımsız çalışabilirse test, bakım ve ileride yapılacak değişiklikler kolaylaşır. Karmaşık uygulamalarda bu ayrım yazılım geliştirme sürecinin parçası olarak ele alınmalıdır.

Erişilebilirlik ve hareket hassasiyeti nasıl yönetilir?

Akıcı geçişler bazı kullanıcılar için bağlamı güçlendirirken, yoğun yakınlaştırma, büyük ölçek değişimi, parallax benzeri hareket veya uzun kayan animasyonlar rahatsızlık oluşturabilir. Kullanıcının işletim sistemi üzerinden belirttiği prefers-reduced-motion tercihi dikkate alınmalı; bu durumda animasyonlar devre dışı bırakılmalı ya da basit bir kısa cross-fade ile sınırlandırılmalıdır.

Animasyon, klavye odağını yönetmez. DOM güncellemesinden sonra odak yanlış öğede kalabilir veya kaldırılan bir elemana bağlı olabilir. Sayfa geçişlerinde başlık yapısı, odak sırası ve ekran okuyucu duyuruları ayrıca test edilmelidir. Görsel süreklilik sağlanması, semantik sürekliliğin otomatik sağlandığı anlamına gelmez.

• Odak görünürlüğünü animasyon sırasında kaybetmeyin.
• İçeriğin okunmasını geciktiren uzun giriş animasyonları kullanmayın.
• Hareket azaltma tercihinde kritik olmayan tüm dönüşümleri kapatın.
• Animasyonu bilgi vermenin tek yöntemi olarak kullanmayın.
• Ekran okuyucu ve yalnızca klavye senaryolarını gerçek cihazlarda test edin.

View Transitions API performansı artırır mı?

API'nin birincil amacı ağ yükleme süresini azaltmak değil, durumlar arasındaki görsel değişimi daha anlaşılır ve akıcı hâle getirmektir. Sayfa gerçekten geç yükleniyorsa view transition bu gecikmeyi çözmez; yalnızca geçişi farklı biçimde sunar. Ağ, sunucu, JavaScript ve görsel optimizasyonları ayrı değerlendirilmelidir.

Anlık görüntüler ve animasyonlar GPU belleği ile işlem kaynakları kullanabilir. Çok büyük yüzeyleri, video öğelerini veya çok sayıda bağımsız öğeyi aynı anda transition kapsamına almak düşük güçlü cihazlarda maliyet oluşturabilir. Özellikle uzun sayfalarda yalnızca kullanıcıya bağlam sağlayan öğelerin ayrı snapshot olarak seçilmesi daha dengeli bir yaklaşımdır.

Gerçek performans sorunu bulunan projelerde önce web sitesi hız optimizasyonu yapılmalı; View Transitions API bunun yerine geçen bir hızlandırma tekniği olarak sunulmamalıdır. Kullanıcı algısı ile teknik yükleme performansı birlikte ölçülmeli, fakat birbirine karıştırılmamalıdır.

Hangi projelerde kullanmak mantıklıdır?

API, birbirine görsel olarak bağlı iki durumun bulunduğu arayüzlerde en güçlü sonucu verir. Ürün listeleme ve detay sayfası, görsel galeri, takvim görünümü, dosya yöneticisi, dashboard kartları ve sekmeli içerikler bu gruba girer. Kullanıcının eski öğeyi yeni konumunda takip edebilmesi, animasyona anlam kazandırır.

Uygulama öncesi kontrol listesi

• Geçişin hangi kullanıcı sorusunu çözdüğünü tek cümleyle tanımlayın.
• Same-document mı cross-document mı kullanılacağını mimariye göre seçin.
• Animasyonsuz temel akışın eksiksiz çalıştığını doğrulayın.
• Paylaşılan öğelere kararlı ve benzersiz transition adları verin.
• Eski ve yeni durumda öğe boyutlarının aşırı değişip değişmediğini test edin.
• Hareket azaltma tercihi için ayrı CSS kuralı hazırlayın.
• Klavye odağı, ekran okuyucu ve geri navigasyon davranışını test edin.
• Düşük güçlü mobil cihazlarda akıcılığı kontrol edin.
• Cross-document kullanımda tarayıcı desteğini ve aynı origin şartını doğrulayın.
• Animasyonun yükleme problemini gizlemediğinden emin olun.

Sonuç: Native benzeri his, doğru bağlamla anlam kazanır

View Transitions API, web arayüzlerinde eski ve yeni durumlar arasındaki görsel ilişkiyi tarayıcı desteğiyle kurmayı kolaylaştırır. Aynı belge içinde JavaScript callback'i, belgeler arasında ise CSS opt-in modeli kullanılır. Paylaşılan öğeler transition adlarıyla eşleştirilebilir ve geçici görüntüler standart CSS animasyonlarıyla özelleştirilebilir.

Başarılı uygulama, en gösterişli animasyonu üretmekten çok temel akışı bozmadan bağlamı korumaya dayanır. Feature detection, reduced-motion desteği, benzersiz öğe adları, odak yönetimi ve düşük güçlü cihaz testleri ihmal edilmemelidir. Cross-document desteği daha sınırlı olduğu için animasyon her zaman isteğe bağlı bir geliştirme katmanı olarak kalmalıdır.