Geliştirici testine hazır: Kapsamlı görünüm geçişleri

Bramus

Yayınlanma tarihi: 10 Eylül 2025

Kapsamlı görünüm geçişleri, View Transition API'nin önerilen bir uzantısıdır. Bu uzantı, DOM'un bir alt ağacında görünüm geçişi başlatmanıza olanak tanır. 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.

Hızlı giriş

Kapsamlı bir görünüm geçişi başlatmak için contain: layout uygulanmış herhangi bir HTMLElement üzerinde document.startViewTransition() yerine element.startViewTransition() işlevini çağırın.

document.querySelector('nav').startViewTransition({
  callback: () => {
    // … code that manipulates the contents of <nav>
  },
})

Sonuç olarak, seçtiğiniz HTMLElement öğesinin alt ağacına göre belirlenen bir görünüm geçişi elde edilir. Bu geçişte, ortaya çıkan ::view-transition sözde ağacı söz konusu HTMLElement öğesine yerleştirilir. HTMLElement, geçiş animasyonları için kapsayıcı görevi görür.

html
  ├─ head
  └─ body
     ├─ nav
     │  ├─ ::view-transition
     │  │  └─ ::view-transition-group(thing)
     │  │     └─ ::view-transition-image-pair(thing)
     │  │        ├─ ::view-transition-old(thing)
     │  │        └─ ::view-transition-new(thing)
     │  └─ ul
     │     ├─ li
     │     ├─ li
     │     └─ li
     └─ main
        └─ …

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.

Kapsamlı görünüm geçişleri hakkında her şeyi Kapsamlı görünüm geçişleri açıklayıcı başlıklı makalede öğrenebilirsiniz.

Demo

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

Kapsamlı görüntüleme geçişlerinde nokta, geçiş sırasında üst öğesi tarafından kırpılmış olarak kalır. Ayrıca, nokta gösterildiğinde popover'ın üzerine boyanmaz.

Geri bildirimlerinizi bekliyoruz

Web geliştiricisi topluluğunun aşağıdaki konulardaki geri bildirimlerini bekliyoruz:

• Kapsamlı görünüm geçişleri API'sinin şekli.
• Özelliğin iyi çalıştığı veya beklendiği gibi çalışmadığı kullanım alanları.
• Kendi kendine katılım kapsamları ile ilgili soruların nasıl çözülmesi gerektiği.

CSS WG issue #9890'a yorum yaparak geri bildiriminizi paylaşın. Geri bildirim göndermeden önce bilinen sorunlar ve kısıtlamalar hakkında bilgi edinin.

Bir hatayla karşılaşırsanız Chromium hata bildiriminde bulunarak durumu bize bildirin.