Cross-document transitions

Çok sayfalı geçişleri öğrenirsin.

Same-document ve cross-document

Aynı belge içinde (örneğin tek sayfalık uygulamada) yapılan geçişlere same-document transition denir; JavaScript ile document.startViewTransition() çağrısı başlatır. Oysa çok sayfalı bir sitede her sayfa farklı bir HTML belgesidir; burada cross-document transition gerekir.

Cross-document geçiş için JavaScript yazmana gerek yok. Tarayıcı sayfalar arası gezinmeyi yakalar ve CSS ile belirttiğin geçişi uygular. Bu, klasik çok sayfalı sitelerde bile akıcı geçişler sağlar.

@view-transition kullanımı

Çok sayfalı bir sitede geçişi açmak için CSS'e @view-transition bölümü eklersin. İçinde navigation: auto yazarsan; tarayıcı aynı-origin gezinmelerde otomatik olarak geçiş çizer.

Bu bölüm her sayfanın stil dosyasında olmalıdır. Aksi halde o sayfa geçişe katılmaz. Eski ve yeni sayfa için ::view-transition-old(root) ve ::view-transition-new(root) seçicileri yine geçerlidir; aynı kök yapısı kullanılır.

Uygulama Çok sayfalı geçişi aç ve süreyi ver

İki bölüm yaz. Birincisi @view-transition olsun; blokta navigation: auto bildirimi bulunsun. İkincisi ::view-transition-old(root) seçicisi olsun; blokta animation-duration: 0.5s bildirimi bulunsun.

Örnek çözümü göster

/* çok sayfalı geçiş ve kök süre */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation-duration: 0.5s;
}

Kendini test et

Cross-document transition hangi durumda kullanılır?
- Tek sayfalık bir uygulamada sekme değiştirirken
- Çok sayfalı bir sitede sayfalar arası gezinirken
- Bir form gönderildiğinde alanları temizlemek için
- CSS dosyalarını küçültmek için
Cevabı göster

Çok sayfalı bir sitede sayfalar arası gezinirken — Doğru. Cross-document transition çok sayfalı sitelerde sayfalar arası geçiş içindir.

navigation değerini tamamla

/* çok sayfalı geçiş */
@view-transition {
  navigation: ____;
}

Cevabı göster

/* çok sayfalı geçiş */
@view-transition {
  navigation: auto;
}

Geçiş türlerini araçlarla eşleştir

same-document

Tek sayfada DOM değişimi
cross-document

Çok sayfalı gezinme
startViewTransition()

JS ile tek sayfa geçişi
@view-transition

CSS ile çok sayfa geçişi

Sıradaki ders: Özet - Geçişli galeri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler