View transitions nedir?

View Transitions API ile sayfa geçişlerini öğrenirsin.

View transitions nedir?

View Transitions API, bir sayfanın iki durumu arasında yumuşak bir görsel geçiş çizer. Tarayıcı önce eski görünümün ekran görüntüsünü alır, sonra DOM'u günceller, yeni görünümün görüntüsünü alır ve bu iki anlık görüntü arasında otomatik bir animasyon oynatır.

Bu, tek sayfalık uygulamalarda sayfa değişimini, sekme geçişini ya da liste sıralamasını pürüzsüz yapar. Geçişi başlatmak için JavaScript'te document.startViewTransition() çağrılır; geçişin görünümü CSS ile biçimlenir.

::view-transition kökü

Geçiş çalıştığında tarayıcı, sayfanın en üstüne bir katman ağacı yerleştirir. Bu ağacın kökü ::view-transition pseudo-elementidir; tüm geçiş anlık görüntülerini kapsar ve en üstte bulunur.

Onun altında ::view-transition-group(root), ::view-transition-image-pair(root), ::view-transition-old(root) ve ::view-transition-new(root) bulunur. root adı tüm sayfa için ayrılmıştır; varsayılan geçiş bu ağaçta çizilir.

İki anlık görüntü

Geçiş sırasında tarayıcı iki ekran görüntüsü oluşturur: birincisi DOM güncellenmeden önceki eski görünüm, ikincisi güncellemeden sonraki yeni görünüm. Her iki görüntü de sayfanın tümünü kapsar.

Eski görüntü ::view-transition-old(root), yeni görüntü ::view-transition-new(root) üzerindedir. Varsayılan geçiş, eski görüntünün silinip yenisinin belirmesidir; bu çapraz çözülme (cross-fade) tarayıcı tarafından otomatik çizilir.

Uygulama Kök geçişe süre tanımla

::view-transition-old(root) seçicisi için bir bölüm yaz. Blok içinde animation-duration: 0.4s bildirimi olsun.

Örnek çözümü göster

/* kök geçiş süresi */
::view-transition-old(root) {
  animation-duration: 0.4s;
}

Kendini test et

View Transitions API ne yapar?
- Sayfanın HTTP yanıt süresini kısaltır
- İki sayfa durumu arasında görsel geçiş animasyonu çizer
- CSS dosyalarını otomatik küçültür
- Form gönderimini engeller
Cevabı göster

İki sayfa durumu arasında görsel geçiş animasyonu çizer — Doğru. API eski ve yeni görünüm arasında otomatik bir geçiş animasyonu çizer.

Kök pseudo-elementi yaz

/* kök geçiş katmanı */
::____ {
  background: navy;
}

Cevabı göster

/* kök geçiş katmanı */
::view-transition {
  background: navy;
}

Sıradaki ders: ::view-transition

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler