View Transitions API: SPA'sız Uygulama Hissi

Uygulama hissi veren sayfa geçişleri için yıllarca tek yol vardı: siteyi bir SPA'ya çevirmek, yönlendirmeyi JavaScript'e devretmek ve bunun bedelini paket boyutuyla ödemek. View Transitions API bu denklemi değiştirdi. Artık klasik, çok sayfalı (MPA) bir sitede bile sayfalar arasında yumuşak, anlamlı geçişler yapmak mümkün; üstelik tek satır CSS ile.

Tek Satırla Sayfalar Arası Geçiş

Aynı kökenden (same-origin) iki sayfa arasındaki geçişi etkinleştirmek için her iki sayfanın CSS'ine şu kuralı eklemek yeterli:

@view-transition {
  navigation: auto;
}

Tarayıcı, eski sayfanın bir anlık görüntüsünü alır, yeni sayfayı yükler ve ikisi arasında varsayılan olarak bir çapraz geçiş (cross-fade) uygular. Destekleyen tarayıcılarda (Chrome ve Edge 126+, Safari 18.2+) bu kendiliğinden çalışır. Desteklemeyenlerde ise hiçbir şey bozulmaz; sayfa her zamanki gibi açılır. Bu, gerçek anlamda bir kademeli iyileştirme (progressive enhancement) örneğidir.

Öğeleri Birbirine Bağlamak

Asıl etkileyici kısım, iki sayfadaki "aynı" öğeyi birbirine bağlamak. Örneğin blog listesindeki bir başlık, tıklandığında makale sayfasındaki büyük başlığa dönüşerek büyüyebilir. Bunun için iki öğeye aynı view-transition-name değeri verilir:

/* Liste sayfası */
.post-card h2 { view-transition-name: post-title; }

/* Makale sayfası */
.article h1 { view-transition-name: post-title; }

/* Geçişin süresini ve eğrisini özelleştirmek */
::view-transition-group(post-title) {
  animation-duration: 0.45s;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

Dikkat edilmesi gereken tek kural: bir view-transition-name değeri sayfada benzersiz olmalı. Listede birden fazla kart varsa isimler dinamik olarak (post-title-1, post-title-2 gibi) üretilmeli.

"İyi bir geçiş, kullanıcıya nereden gelip nereye gittiğini anlatır. Süsleme değil, yön bulma aracıdır."

Performans ve Erişilebilirlik

View Transitions animasyonları tarayıcının kendi sıkıştırma katmanında çalıştığı için ana thread'i yormaz. Yine de birkaç ilke önemli:

• Geçişleri kısa tutun; 300–500ms aralığı çoğu durumda yeterli.
• Hareket hassasiyeti olan kullanıcılar için geçişi kapatın: @media (prefers-reduced-motion: reduce) içinde navigation: none kullanılabilir.
• Yeni sayfa yavaş yükleniyorsa geçiş kullanıcıyı bekletir; bu yüzden View Transitions, hızlı bir sunucu yanıtı ve ön yükleme ile birlikte en iyi sonucu verir.

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

Sonuç

Statik ağırlıklı, hızlı yüklenen bir site ile uygulama hissi veren akıcı geçişler artık birbirinin alternatifi değil. Astro gibi static-first mimariler, tarayıcının yerleşik View Transitions desteğiyle birleştiğinde SPA'nın getirdiği JavaScript yükü olmadan aynı premium deneyimi sunmak mümkün.