Görünüm geçişlerindeki yenilikler (2025 güncellemesi)

Bramus

Yayınlanma tarihi: 8 Ekim 2025

2023'te aynı dokümanda görünüm geçişlerini kullanıma sunduğumuzdan beri çok şey değişti.

2024'te belgeler arası görünüm geçişlerini kullanıma sunduk, view-transition-class ve görünüm geçişi türleri gibi iyileştirmeler ekledik ve görünüm geçişleri için destek eklerken Safari'yi de aramızda görmekten memnuniyet duyduk.

Bu yayında, 2025'te görünüm geçişleriyle ilgili nelerin değiştiği hakkında genel bir bakış sunulmaktadır.

Daha iyi tarayıcı ve çerçeve desteği

Aynı doküman görünümü geçişleri, Baseline Newly available olarak kullanıma sunulacak

Interop 2025'in odak alanlarından biri, View Transition API'dir. Bu API'de özellikle document.startViewTransition(updateCallback) ve view-transition-class ile aynı dokümanda görünüm geçişleri, view-transition-name: match-element ile otomatik adlandırma ve :active-view-transition CSS seçici yer alır.

Firefox, bu özellikleri 14 Ekim 2025'te kararlı sürüm olarak yayınlanacak olan Firefox 144'e eklemeyi planlıyor. Bu sayede bu özellikler Baseline Newly Available olarak kullanıma sunulur.

View Transition API desteği artık React çekirdeğinde

React ekibi, yıl boyunca görünüm geçişlerini React'in çekirdeğine eklemek için çalıştı. Nisan ayında desteği duyurmuşlardıreact@experimental ve bu hafta React Conf'ta desteği react@canary'a taşıdılar. Bu da tasarımın son haline yakın olduğu anlamına geliyor.

function Child() {
  return (
    <ViewTransition>
      <div>Hi</div>
    </ViewTransition>
  );
}

function Parent() {
  const [show, setShow] = useState();
  if (show) {
    return <Child />;
  }
  return null;
}

Tüm ayrıntılar için React'in <ViewTransition> dokümanlarına göz atabilir veya konuyla ilgili iyi bir giriş için Aurora Scharff'ın bu konuşmasını izleyebilirsiniz.

Yakın zamanda kullanıma sunulan özellikler

view-transition-name: match-element ile öğeleri otomatik olarak adlandırma

Görünüm geçişinin bir parçası olarak anlık görüntüsü alınacak bir öğeyi işaretlemek için öğeye view-transition-name ekleyin. Bu, iki farklı öğe arasında geçiş yapma gibi özellikleri etkinleştirdiği için görünüm geçişleri açısından çok önemlidir. Her öğe, geçişin her iki tarafında da aynı view-transition-name değerine sahiptir ve görünüm geçişleri sizin için her şeyi halleder.

Ancak, gerçekten değişmeyen birçok öğeyi geçiş yaparken öğeleri benzersiz şekilde adlandırmak zahmetli olabilir. Bir listede 100 öğe taşıyorsanız 100 benzersiz ad bulmanız gerekir.

match-element sayesinde tüm bunları yapmanıza gerek kalmaz. Bu, view-transition-name için değer olarak kullanıldığında tarayıcı, öğenin kimliğine göre her eşleşen öğe için dahili bir view-transition-name oluşturur.

Bu yaklaşım, aşağıdaki demoda kullanılmıştır. Satırdaki her karta otomatik olarak oluşturulmuş bir view-transition-name verilir.

.card {
  view-transition-name: match-element;
  view-transition-class: card;
}

#targeted-card {
  view-transition-name: targeted-card;
  view-transition-class: none;
}

Giriş veya çıkış yapan karta açık bir ad verilir. Bu ad, CSS'de belirli animasyonları bu anlık görüntüye eklemek için kullanılır. Diğer tüm kartların anlık görüntüleri, kendileriyle ilişkili view-transition-class kullanılarak şekillendirilir.

/* Style all pseudos with the class .card */
::view-transition-group(*.card) {
  animation-timing-function: var(--bounce-easing);
  animation-duration: 0.5s;
}

/* Style only the targeted-card's pseudos */
::view-transition-old(targeted-card):only-child {
  animation: animate-out ease-out 0.5s forwards;
}
::view-transition-new(targeted-card):only-child {
  animation: animate-in ease-in 0.25s forwards;
}

Geliştirici Araçları artık view-transition-class kullanan sözde öğeleri hedefleyen kuralları gösteriyor

Görünüm geçişlerinde hata ayıklamak için tüm animasyonları duraklatmak üzere Geliştirici Araçları'ndaki Animasyonlar panelini kullanabilirsiniz. Bu sayede, görünüm geçişinin tamamlanmış duruma ulaşacağından endişelenmeden sözde öğeleri inceleyebilirsiniz. Hatta geçişlerin nasıl gerçekleştiğini görmek için animasyonun zaman çizelgelerinde manuel olarak ilerleyebilirsiniz.

Daha önce, ::view-transition-* sözde öğelerinden biri incelenirken Chrome Geliştirici Araçları, kendi view-transition-class kümesi kullanılarak sözde öğeleri hedefleyen kuralları göstermiyordu. Bu durum, işlevin eklendiği Chrome 139'da değişti.

İç içe yerleştirilmiş görünüm geçişi grupları Chrome 140'tan itibaren kullanılabilir.

Görünüm geçişi çalıştırıldığında, anlık görüntüsü alınan öğeler sözde öğeler ağacında oluşturulur. Oluşturulan ağaç varsayılan olarak "düz" olur. Bu durumda, DOM'daki orijinal hiyerarşi kaybolur ve yakalanan tüm görünüm geçişi grupları tek bir ::view-transition sözde öğesi altında kardeş öğeler olur.

Bu düz ağaç yaklaşımı birçok kullanım alanı için yeterli olsa da kırpma veya 3D dönüştürme gibi görsel efektler kullanıldığında sorunlu hale gelir. Bunlar, ağaçta belirli bir hiyerarşi gerektirir.

"İç içe görünüm geçişi grupları" sayesinde artık ::view-transition-group sözde öğelerini iç içe yerleştirebilirsiniz. Görünüm geçişi grupları iç içe yerleştirildiğinde, geçiş sırasında kırpma gibi efektleri geri yüklemek mümkündür.

Görünüm geçişi gruplarını nasıl kullanacağınızı öğrenin.

Sözde öğeler artık daha fazla animasyon özelliğini devralıyor

Bir animation-* uzun özelliklerinden birini ::view-transition-group(…) sözde öğesinde ayarladığınızda, kapsanan ::view-transition-image-pair(…), ::view-transition-old(…) ve ::view-transition-new(…) de bu özelliği devralır. Bu, ::view-transition-new(…) ile ::view-transition-old(…) arasındaki çapraz geçişi ::view-transition-group(…) ile otomatik olarak senkronize tuttuğu için kullanışlıdır.

::view-transition-group(.card) {
  animation-duration: 0.5s;
}

Başlangıçta bu devralma animation-duration ve animation-fill-mode (daha sonra animation-delay) ile sınırlıydı ancak artık daha fazla animasyon uzun biçiminin devralınması için genişletildi.

Görünüm geçişlerini destekleyen tarayıcılar artık kullanıcı aracısı stil sayfalarında aşağıdakilere sahip olmalıdır:

:root::view-transition-image-pair(*),
:root::view-transition-old(*),
:root::view-transition-new(*) {
  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
  animation-timing-function: inherit;
  animation-iteration-count: inherit;
  animation-direction: inherit;
  animation-play-state: inherit;
}

Daha fazla özellik devralan sözde öğeler, Chrome 140'ta kullanıma sunuldu.

finished sözü geri çağırmasının yürütülmesi artık bir çerçeve beklemiyor

Chrome, finished geri çağırma işlemini yürütme sözü verirken bu mantığı yürütmeden önce bir karenin oluşturulmasını beklerdi. Bu durum, komut dosyası görsel olarak benzer bir durumu korumak için bazı stilleri hareket ettirirken animasyonun sonunda titremeye neden olabilir.

 document.startViewTransition(() => {
  if (from) {
    dfrom.classList.remove("shadow");
    dto.appendChild(target);
  } else {
    dto.classList.remove("shadow");
    dfrom.appendChild(target);
  }
}).finished.then(() => {
  if (from) {
    dto.classList.add("shadow");
  } else {
    dfrom.classList.add("shadow");
  }
  from = 1 - from;
});

Zamanlamadaki bu değişiklik, görünüm geçişi temizleme adımlarını yaşam döngüsü tamamlandıktan sonra eşzamansız olarak çalıştırarak durumu düzeltir. Bu sayede, finished çözünürlüğünde oluşturulan görsel çerçeve, görünüm geçişi yapısını korumaya devam eder ve titreşimi önler.

Bu zamanlama değişikliği, Chrome 140'ta kullanıma sunuldu.

Yakında kullanıma sunulacak özellikler

Yıl henüz bitmediği için bazı özellikleri kullanıma sunmak için biraz daha zamanımız var.

Kapsamlı görünüm geçişleri, Chrome 140'ta test edilmeye hazır

Kapsamlı görünüm geçişleri, View Transition API'nin önerilen bir uzantısıdır. Bu uzantı, herhangi bir HTMLElement üzerinde element.startViewTransition() (document.startViewTransition() yerine) çağırarak DOM'un bir alt ağacında görünüm geçişi başlatmanıza olanak tanır.

Kapsamlı geçişler, farklı geçiş köklerine sahip oldukları sürece birden fazla görünüm geçişinin aynı anda çalışmasına olanak tanır. İşaretçi etkinlikleri, dokümanın tamamında değil yalnızca söz konusu alt ağaçta engellenir (yeniden etkinleştirebilirsiniz). Ayrıca, geçiş kökünün dışındaki öğelerin, kapsamlı görünüm geçişinin üzerine çizilmesine izin verirler.

Aşağıdaki demoda, düğmelerden birini tıklayarak bir noktayı kapsayıcısı içinde hareket ettirebilirsiniz. Bu, doküman kapsamlı görünüm geçişleri veya öğe kapsamlı görünüm geçişleriyle yapılabilir. Böylece, bunların nasıl farklı davrandığını görebilirsiniz.

Bu özellik, chrome://flags bölümünde "Deneysel Web Platformu özellikleri" işareti etkinleştirilerek Chrome 140'tan itibaren test edilebilir. Geliştiricilerden geri bildirim almak için çalışmalarımızı sürdürüyoruz.

::view-transition öğesinin konumu Chrome 142'de fixed yerine absolute olarak değiştirilecek

::view-transition sözde öğesi şu anda position: fixed kullanılarak konumlandırılıyor. CSS Çalışma Grubu'nun kararı uyarınca bu değer position: absolute olarak değişecektir.

Chrome 142'de kullanıma sunulacak olan fixed değerinden absolute değerine yönelik bu position değişiklik, ::view-transition sahtesinin kapsayan bloğu zaten anlık görüntü kapsayan bloğu olduğundan görsel olarak gözlemlenemez. Gözlemlenebilen tek etki, getComputedStyle işlemi yaparken farklı bir position değeridir.

document.activeViewTransition, Chrome 142'ye geliyor

Görünüm geçişi başlatıldığında bir ViewTransition örneği oluşturulur. Bu nesne, geçiş ilerlemesini izlemek için çeşitli sözler ve işlevler içerir. Ayrıca, geçişi atlama veya türlerini değiştirme gibi işlemler yapmanıza olanak tanır.

Chrome, bu örneği manuel olarak takip etmenizi gerektirmek yerine artık bu nesneyi temsil eden bir document.activeViewTransition özelliği sunuyor. Devam eden bir geçiş yoksa değeri null olur.

Aynı doküman görünümü geçişlerinde değer, document.startViewTransition çağrıldığında ayarlanır. Dokümanlar arası görünüm geçişleri için ViewTransition örneğine pageswap ve pagereveal etkinliklerinden erişebilirsiniz.

document.activeViewTransition desteği Chrome 142'de kullanıma sunulacak.

ViewTransition.waitUntil ile görünüm geçişinin otomatik olarak tamamlanmasını önleme

Görünüm geçişi, tüm animasyonları tamamlandığında otomatik olarak finished durumuna ulaşır. Bu otomatik tamamlamayı önlemek için yakında ViewTranistion.waitUntil simgesini kullanabilirsiniz. Bir söz geçirilirken ViewTransition, yalnızca geçirilen söz de çözüldüğünde finished durumuna ulaşır.

const t = document.startViewTransition(…);
t.waitUntil(async () => {
  await fetch(…);
});

Bu değişiklik, yılın ilerleyen dönemlerinde kullanıma sunulacak ve örneğin fetch beklemeye veya kaydırmaya dayalı görünüm geçişinin daha kolay uygulanmasına olanak tanıyacak.

Sırada ne var?

2023'te ilk kez sunduğumuz görünüm geçişlerinden bu yana boş durmadığımızı görebilirsiniz. Gelecekte kapsamlı görünüm geçişlerini kullanıma sunmayı dört gözle bekliyoruz ve her zaman olduğu gibi geri bildirimlerinize açığız.

Görünüm geçişleriyle ilgili sorularınız varsa sosyal medyadan bize ulaşabilirsiniz. Görünüm geçişleriyle ilgili özellik istekleri CSS WG'ye gönderilebilir. Bir hatayla karşılaşırsanız Chromium'da hata kaydı oluşturarak bize bildirin.