::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

Sıradaki ders: View-transition-name

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler