Özet - Geçişli galeri
View transitions ile geçişli galeri kurarsın.
Geçişli galeri
Bu grupta view transitions'ın temel parçalarını öğrendin: ::view-transition kökü, view-transition-name ile adlandırma, @keyframes ile özel animasyon ve @view-transition ile çok sayfalı geçiş.
Şimdi bunları bir galeri örneğinde birleştireceksin. Küçük görsel ile detay görünümü arasında yumuşak bir geçiş çıkarmak için hem adlandırma hem de animasyon kullanacaksın.
Uygulama Küçük görseli geçişe bağla
.thumb seçicisi için bir bölüm yaz. Blokta view-transition-name: gallery-thumb bildirimi olsun. Böylece küçük görsel ile detay görseli aynı adı paylaşacak.
Örnek çözümü göster
/* küçük görsel için ad */
.thumb {
view-transition-name: gallery-thumb;
}Uygulama Detay görünümü için yakınlaşma animasyonu
İki bölüm yaz. Birincisi @keyframes zoom-in olsun; from { transform: scale(0.8) } ve to { transform: scale(1) } karelerini içersin. İkincisi ::view-transition-new(root) seçicisi olsun; blokta animation: zoom-in 0.3s forwards bildirimi bulunsun.
Örnek çözümü göster
/* detay görünümü için yakınlaşma animasyonu */
@keyframes zoom-in {
from { transform: scale(0.8); }
to { transform: scale(1); }
}
::view-transition-new(root) {
animation: zoom-in 0.3s forwards;
}Kendini test et
-
Galeride küçük görsel ile detay görünümü arasında akıcı geçiş için hangi CSS özelliği kullanılır?
- view-transition-name
- background-color
- z-index
- display
Cevabı göster
view-transition-name — Doğru. Aynı view-transition-name iki öğeye verince tarayıcı aralarında geçiş çizer.
-
Detay görseline geçiş adı ver
/* detay görseline ad ver */ .detail-image { view-transition-name: ____; }Cevabı göster
/* detay görseline ad ver */ .detail-image { view-transition-name: gallery-thumb; }