::view-transition
::view-transition sözde elementini öğrenirsin.
::view-transition kök katmanı
View Transitions API çalıştığında tarayıcı, sayfanın en üstüne bir katman yerleştirir. Bu katmanın kökü ::view-transition pseudo-elementidir. Tüm geçiş görselleri bu kök altında yaşar; kök, geçiş süresince sayfanın üzerinde durur.
Örneğin bir düğmeye tıklanınca liste sıralandığında, kök katmanı eski ve yeni liste anlık görüntülerini taşır. Sen bu köke background ya da position gibi özellikler vererek tüm geçişi etkileyebilirsin.
İç katmanlar
Kök altında her adlandırılmış geçiş için üç iç katman daha vardır. ::view-transition-group(name) eski ve yeni görüntüyü taşıyan kapsayıcıdır; konum ve boyut değişimini üstlenir. ::view-transition-image-pair(name) eski ve yeni görüntü çiftini tutar.
En altta ::view-transition-old(name) ve ::view-transition-new(name) bulunur. Bu dört katmanın her birine ayrı animasyon yazabilirsin; böylece geçişin her parçasını ayrı denetlersin.
Uygulama Eski ve yeni görüntüye süre ver
İki ayrı bölüm yaz. Birincisi ::view-transition-old(root) seçicisi olsun; blokta animation-duration: 0.3s bildirimi bulunsun. İkincisi ::view-transition-new(root) seçicisi olsun; blokta yine animation-duration: 0.3s bildirimi bulunsun.
Örnek çözümü göster
/* kök görüntü süresi */
::view-transition-old(root) {
animation-duration: 0.3s;
}
::view-transition-new(root) {
animation-duration: 0.3s;
}Kendini test et
-
Hangi pseudo-element tüm geçişi kapsayan kök katmanı seçer?
- ::view-transition
- ::view-transition-old
- ::view-transition-group
- ::view-transition-new
Cevabı göster
::view-transition — Doğru. ::view-transition tüm geçişi kapsayan kök pseudo-elementtir.
-
Kök görüntü çiftinin adını yaz
/* kök görüntü çifti */ ::view-transition-image-pair(____) { isolation: auto; }Cevabı göster
/* kök görüntü çifti */ ::view-transition-image-pair(root) { isolation: auto; } -
Pseudo-element ile görevünü eşleştir
- ::view-transition
- Tüm geçişi kapsayan kök katman
- ::view-transition-old
- Eski sayfa anlık görüntüsü
- ::view-transition-new
- Yeni sayfa anlık görüntüsü
- ::view-transition-group
- Eski ve yeni görüntüyü taşıyan grup