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