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 dokümanlar 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. Ayrıca Safari'nin görünüm geçişleri için destek eklemesini memnuniyetle karşıladık.

Bu yayında, 2025'te görünüm geçişlerinde değişenler 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ı belge 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ı hale gelecek olan Firefox 144 sürümüne dahil etmeyi planlıyor. Bu işlem, söz konusu özellikleri Baseline Newly kullanılabilir hale getirir.

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> belgelerine 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 ö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ız gerekmez. Bu, view-transition-name için değer olarak kullanıldığında tarayıcı, öğenin kimliğine göre eşleşen her öğ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 eklenir.

.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 kart açık bir ad alır. 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 Geliştirici Araçları'ndaki Animasyonlar panelini kullanarak tüm animasyonları duraklatabilirsiniz. Bu sayede, görünüm geçişinin tamamlanmış duruma ulaşacağından endişelenmeden sözde öğeleri inceleyebilirsiniz. Geçişlerin nasıl gerçekleştiğini görmek için animasyonun zaman çizelgelerinde manuel olarak da gezinebilirsiniz.

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 için ağaçta belirli bir hiyerarşi gerekir.

"İç 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 ::view-transition-group(…) sözde öğesinde animation-* uzun el yazısı özelliklerinden birini ayarladığınızda, içerilen ::view-transition-image-pair(…), ::view-transition-old(…) ve ::view-transition-new(…) de bu özelliği devralır. Bu özellik, ::view-transition-new(…) ile ::view-transition-old(…) arasındaki geçişi ::view-transition-group(…) ile otomatik olarak senkronize ettiği 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 ile sınırlıydı (daha sonra animation-delay de eklendi) ancak şimdi 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ünü kullanırken bu mantığı yürütmeden önce bir çerçevenin 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 hâlâ 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 edilmeye hazırdır. Geliştiricilerden geri bildirim almak için çalışmalarımızı sürdürüyoruz.

::view-transition konumunun Chrome 142'de fixed yerine absolute olarak değiştirilmesi

::view-transition sözde seçicisi ş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şecek.

Chrome 142'de kullanıma sunulacak olan bu position değerinin fixed'den absolute'e değişimi, ::view-transition sözde öğesinin kapsayan bloğu zaten anlık görüntü kapsayan blok olduğundan görsel olarak gözlemlenemez. Gözlemlenebilen tek etki, getComputedStyle işlemi yapılırken 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 artık bu örneği manuel olarak takip etmenizi gerektirmek yerine bu nesneyi temsil eden bir document.activeViewTransition özelliği sunuyor. Geçiş devam etmiyorsa 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 etkinliklerinde erişebilirsiniz.

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

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

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 beklenmesine 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 kullanıma sunduğumuz Görünüm Geçişleri'nden 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. Her zaman olduğu gibi geri bildirimlerinizi bekliyoruz.

Görünüm geçişleriyle ilgili sorularınız varsa sosyal medyada 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 hata bildiriminde bulunarak durumu bize bildirin.