Ö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;
}

Sıradaki ders: Scroll-driven animasyonlar

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler