Yayınlanma tarihi: 27 Mart 2026
Öğe kapsamlı görünüm geçişleri, birden fazla görünüm geçişinin aynı anda çalışmasına, devam eden görünüm geçişlerinin başka bir görünüm geçişi içinde yerleştirilmesine ve sayfanın geri kalanını etkileşimli tutarken belge kapsamlı görünüm geçişleriyle karşılaşabileceğiniz z-index sorunlarının çözülmesine olanak tanır. Bunları nasıl kullanacağınızı öğrenmek için bu kılavuzu okuyun.
Daha dar kapsamlı görünüm geçişlerine duyulan ihtiyaç
document.startViewTransition() ile (veya dokümanlar arası karşılığı aracılığıyla) aynı dokümanda görünüm geçişi başlattığınızda tarayıcı, sonuçtaki görünüm geçişini dokümanla sınırlandırır.
Güncelleme geri çağırması yürütüldükten ve tarayıcı gerekli tüm öğelerin anlık görüntüsünü aldıktan sonra, sonuçtaki ::view-transition yer paylaşımı ve sözde öğe ağacı, aşağıdaki örnekte :root öğesine html eklenir.
html
├─ ::view-transition
│ └─ ::view-transition-group(root)
│ └─ ::view-transition-image-pair(root)
│ ├─ ::view-transition-old(root)
│ └─ ::view-transition-new(root)
├─ head
└─ body
└─ …
::view-transition katmanı geçiş kökünün üzerinde oluşturulduğundan bu durum, beklenmedik durumlara yol açabilir. Örneğin, görünüm geçişine katılan öğeler, aniden diğer katılımcı olmayan öğelerle çakışabilir veya öğeler, görünüm geçişi sırasında artık üst sarmalayıcıları tarafından kırpılmayabilir.
Canlı Demo
Demo Kaydı
::view-transition üzerinde pointer-events yeniden etkinleştirme veya iç içe yerleştirilmiş görünüm geçişi grupları kullanma, belge kapsamlı görünüm geçişlerinin neden olduğu bazı yan etkileri çözebilir. Ancak bu yöntemler tüm sorunları çözemez.
Örneğin, geçiş etkin durumdayken position: fixed içeren öğeler veya pop-over'lar, belge kapsamlı bir görünüm geçişi tarafından gizlenmeye devam eder. Bu durum, z-index sorunu olarak da bilinir.
Aşağıdaki demoda popover'ı açıp kapatın ve ardından belge kapsamlı bir görünüm geçişi başlatmak için Karıştır düğmesini seçin. İç içe yerleştirilmiş görünüm geçişi grupları kırpma sorununu çözer ancak katman oluşturma sorunu devam eder.
Canlı Demo
Demo Kaydı
Geçici çözümlerden biri, popover öğesine view-transition-name vererek görüntüleme geçişinin bir parçası olarak yakalamaktır. Bu yöntem tek bir örnek için işe yarasa da bakımı zordur ve anlık görüntü alma sürecini gereksiz yere zorlar.
Öğe kapsamlı görünüm geçişleri
Öğe kapsamlı görünüm geçişleri, DOM'un bir alt ağacında görünüm geçişi başlatmanıza olanak tanır. document.startViewTransition() işlevini çağırmak yerine, görünüm geçişini bu öğeyle sınırlayan rastgele bir öğede element.startViewTransition() işlevini çağırırsınız.
Aşağıdaki snippet'te tarayıcı, <ul> öğesinde öğe kapsamlı bir görüntüleme geçişi başlatır.
document.querySelector('ul').startViewTransition({
callback: () => {
// … code that manipulates the contents of <ul>
},
})
element.startViewTransition() öğesini çağırdığınız öğeye (ör. <ul>) geçiş kökü veya kapsam adı verilir.
Tarayıcı bir görünüm geçişini bir öğeyle sınırlandırdığında, bu öğe DOM'un geri kalanından izole edilir:
- Tarayıcı, yalnızca kapsamın alt ağacındaki öğelerin anlık görüntüsünü alır.
- Anlık görüntü oluşturma işlemi sırasında (
updategeri çağırma işlemi yürütülürken) yalnızca kapsamın oluşturulması durur. - Elde edilen
::view-transitionsözde ağacı, geçiş köküne yerleştirilir.
Örneğin, <ul> ile görünüm geçişi etkin durumdayken DOM ağacı şu şekilde görünür:
html
├─ head
└─ body
├─ ul
│ ├─ ::view-transition
│ │ └─ ::view-transition-group(root)
│ │ ├─ ::view-transition-group-children(root)
│ │ │ └─ …
│ │ └─ ::view-transition-image-pair(root)
│ │ ├─ ::view-transition-old(root)
│ │ └─ ::view-transition-new(root)
│ ├─ li
│ ├─ li
│ └─ li
├─ button#showpopover
├─ button#reorder
└─ div#popover
└─ p
::view-transition sözde öğesi, geçiş köküyle aynı boyuta ve şekle sahiptir ve yalnızca geçiş kökünün üzerinde oluşturulur. Bu nedenle, geçiş kökünün dışındaki öğelerin katmanlama sırasına uyulur.
Örneğin, <ul> öğesinin üzerinde görünen bir popover'ınız varsa ve <ul> öğesinde öğe kapsamlı bir görünüm geçişi başlatırsanız popover, görünüm geçişinin sözde ağacı tarafından gizlenmez.
Aşağıdaki demoda deneyin. İki düğmesi vardır. İlk düğme popover'ı açıp kapatır, ikinci düğme ise öğe kapsamlı bir görünüm geçişi kullanarak liste öğelerini yeniden sıralar.
Canlı Demo
Demo Kaydı
Öğe kapsamlı görünüm geçişleri kullanıldığından, geçiş etkin durumdayken popover <ul> öğesinin üzerinde görünür kalır.
Ayrıca, <ul> öğesinin dışındaki öğeler (ör. düğmeler) kapsamın bir parçası olmadıkları için etkileşimli olmaya devam eder.
Kendi kendine katılan kapsamlar ve iç içe yerleştirilmiş görünüm geçişi grupları
Taşmayı kırpan bir öğede (yani overflow özelliği hidden, scroll veya clip olarak ayarlandığında) öğe kapsamlı bir görünüm geçişi başlattığınızda, görünüm geçişinin içeriğinin görsel olarak kırpılmış kaldığını fark edersiniz.
Bunun nedeni, öğe kapsamlı görünüm geçişlerinin aşağıdakileri otomatik olarak işlemesidir:
- Kapsam otomatik olarak
view-transition-name: rootuygulanır ve bu da kapsamı kendi kendine katılan bir kapsam haline getirir. - Kapsam, iç içe görünüm geçişi gruplarını etkinleştirmek için otomatik olarak
view-transition-group: containuygulanır. - Kapsam kökü taşmasını kırparsa sonuçta elde edilen
::view-transition-group-children(root)sözde öğesi, içeriğinioverflow: clipkullanarak otomatik olarak kırpar. Bu sayede sözde öğelerin geçiş kökünden görsel olarak taşması önlenir.
Bu sayede, öğe kapsamlı görünüm geçişleriyle kullandığınız CSS'yi yalnızca yakalamak istediğiniz öğelere odaklanmış şekilde tutabilirsiniz. Örneğin, liste demosunda CSS yalnızca liste öğelerine ad ekler:
ul li {
view-transition-name: match-element;
view-transition-class: album;
}
Aşağıdaki demoda deneyin. Kendi kendine katılımı geçersiz kılmanıza olanak tanır. Kapsam kendi kendine katılım olduğunda (varsayılan davranış) her şey beklendiği gibi çalışır. Kapsam kendi kendine katılmadığında kenarlığı hemen değişir ve geçiş sırasında içeriği sarmalayıcının dışına taşar.
Canlı Demo
Demo Kaydı
Referans olması açısından, bu demoda kendi kendine katılımın yer aldığı sözde ağaç aşağıdaki gibidir:
html
├─ head
└─ body
├─ ul
│ ├─ ::view-transition
│ │ └─ ::view-transition-group(root)
│ │ ├─ ::view-transition-group-children(root)
│ │ │ ├─ ::view-transition-group(item1)
│ │ │ │ └─ ::view-transition-image-pair(item1)
│ │ │ │ ├─ ::view-transition-old(item1)
│ │ │ │ └─ ::view-transition-new(item1)
│ │ │ ├─ ::view-transition-group(item2)
│ │ │ │ └─ …
│ │ │ …
│ │ └─ ::view-transition-image-pair(root)
│ │ ├─ ::view-transition-old(root)
│ │ └─ ::view-transition-new(root)
│ ├─ li
│ ├─ li
│ └─ li
└─ button#reorder
Geçiş kökü olan <ul> öğesi, içeriğini dikey olarak kırptığı için ::view-transition-group-children(root) de otomatik olarak kırpma uygular.
Eşzamanlı öğe kapsamlı görünüm geçişleri
Öğe kapsamlı görünüm geçişleri yalıtılmış olarak çalıştığından, farklı bir kapsama sahipse birden fazla öğe kapsamlı görünüm geçişi aynı anda çalışabilir.
Aşağıdaki demoda, her liste için bir tane olmak üzere iki yeniden sıralama düğmesi bulunmaktadır. Her düğme, yalnızca kendi listesinde öğe kapsamlı bir görünüm geçişi başlatır. Her iki listenin DOM ağaçları çakışmadığı için iki öğe kapsamlı görünüm geçişi aynı anda izole bir şekilde çalışabilir.
Canlı Demo
Demo Kaydı
Bu yalıtılmış yapı, view-transition-name değerlerini farklı kapsamlar arasında yeniden kullanmanıza da olanak tanır. Bir ad, kapsamı içinde benzersiz kaldığı sürece çakışma olmaz.
İç içe yerleştirilmiş öğe kapsamlı görünüm geçişleri ve view-transition-name kapsama
Birden fazla öğe kapsamlı görünüm geçişinin DOM ağaçları çakıştığında view-transition-name değer çakışması riski vardır. Bu nedenle, tarayıcı bu riski azaltmak için etkin öğe kapsamlı görünüm geçişlerine otomatik olarak view-transition-scope: all değerini atar.
anchor-scope, anchor-name değerlerini kapsamlandırdığı gibi, view-transition-scope özelliği de view-transition-name değerlerinin öğenin alt ağacına göre kapsamlandırılmasını sağlar. Özellik, kapsamını belirlemek istediğiniz adların listesi olan none veya tüm değerlerin kapsamını belirlemek için all değerini kabul eder.
view-transition-scope, adların taşmasını önlemenin yanı sıra bir öğenin ve içeriğinin eşzamanlı bir görünüm geçişi tarafından yakalanmasını da engeller. Anlık görüntü oluşturma işlemi, anlık görüntüsü alınacak bir öğeyi bulmak için alt ağaçta ilerlerken view-transition-scope: all uygulanmış öğeleri (ve bunların tüm alt ağaçlarını) yoksayar. Bu, söz konusu öğelerin zaten farklı bir öğe kapsamlı görüntüleme geçişine katıldığını varsayar.
Aşağıdaki demo, bir önceki demonun bir varyasyonudur. Liste içeriklerini karıştıran iki düğmenin yanı sıra listeleri değiştirmek için bir Değiştir düğmesi de bulunur. .reversed sınıfını #lists-wrapper üzerinde etkinleştirmek, değiştirme işlemini gerçekleştirir.
Canlı Demo
Demo Kaydı
view-transition-scope: all, karıştırma geçişi sırasında otomatik olarak uygulandığından karıştırma geçişi devam ederken eşzamanlı bir dışa aktarma geçişi başlatabilirsiniz.
view-transition-scope: all, bir öğenin dış geçişte anlık görüntüsünün alınmasını da engellediğinden demoda, <ul> öğelerini sarmalayan öğelere view-transition-name değerleri de eklenir.
#list1-wrapper, #list2-wrapper {
view-transition-name: attr(id type(<custom-ident>));
}
Bu demoda, ikinci listede karıştırma işlemi başlatıldıktan ve ardından her iki liste de değiştirildikten sonraki sözde ağaç şu şekilde görünür:
html
├─ head
└─ body
└─ #lists-wrapper.reversed (SCOPE)
├─ ::view-transition
│ └─ ::view-transition-group(lists-wrapper)
│ ├─ ::view-transition-group-children(lists-wrapper)
│ │ ├─ ::view-transition-group(list1-wrapper)
│ │ │ └─ ::view-transition-image-pair(list1-wrapper)
│ │ │ ├─ ::view-transition-old(list1-wrapper)
│ │ │ └─ ::view-transition-new(list1-wrapper)
│ │ └─ ::view-transition-group(list2-wrapper)
│ │ └─ ::view-transition-image-pair(list2-wrapper)
│ │ ├─ ::view-transition-old(list2-wrapper)
│ │ └─ ::view-transition-new(list2-wrapper)
│ └─ ::view-transition-image-pair(lists-wrapper)
│ ├─ ::view-transition-old(lists-wrapper)
│ └─ ::view-transition-new(lists-wrapper)
├─ div#list1-wrapper
│ ├─ ul
│ │ ├─ li#item1
│ │ ├─ li#item2
│ │ └─ li#item3
│ └─ button.reorder
└─ div#list2-wrapper
├─ ul (SCOPE)
│ ├─ ::view-transition
│ │ └─ ::view-transition-group(list)
│ │ ├─ ::view-transition-group-children(list )
│ │ │ ├─ ::view-transition-group(item4)
│ │ │ │ └─ ::view-transition-image-pair(item4)
│ │ │ │ ├─ ::view-transition-old(item4)
│ │ │ │ └─ ::view-transition-new(item4)
│ │ │ ├─ ::view-transition-group(item5)
│ │ │ │ └─ …
│ │ │ …
│ │ └─ ::view-transition-image-pair(list)
│ │ ├─ ::view-transition-old(list)
│ │ └─ ::view-transition-new(list)
│ ├─ li#item4
│ ├─ li#item5
│ └─ li#item6
└─ button.reorder
Daha fazla bilgi
Öğe kapsamlı görünüm geçişleri hakkında daha fazla bilgi edinmek için açıklayıcı belgeyi, css-view-transitions-2 spesifikasyonunu ve açık spesifikasyon düzenlemelerinin listesini inceleyin.