View-transition-name

CSS kursu · Uzman · Ders 27/53

view-transition-name ile adlandırılmış geçişleri öğrenirsin.

view-transition-name özelliği

Bir öğeye geçiş kimliği vermek için view-transition-name özelliğini kullanırsın. Değer bir custom-ident'tir; örneğin view-transition-name: card-1. Bu adı verdiğin öğe, geçiş sırasında kendi başına bir geçiş grubu oluşturur.

Ad verilmemiş öğeler sayfanın kök geçişinde kaybolur. Ad verilen öğe ise kökten bağımsız hareket eder; eski ve yeni konumu arasında yumuşak bir geçiş çizilir.

Adlandırılmış geçişler

Adlandırılmış geçişler (named transitions) en çok bir öğenin iki görünümü arasında geçiş yaparken işe yarar. Örneğin bir galeride küçük görsel ile büyütülmüş detay görünümü aynı view-transition-name değerini taşısın; tıklanınca tarayıcı iki görünüm arasında akıcı bir geçiş çizer.

Bu, liste ve detay arasında köprü kurmaktır. Öğe iki görünümde de aynı adı taşıdığı için tarayıcı onu aynı öğe gibi algılar ve konum ile boyutu yumuşakça değiştirir.

Uygulama Galeri kartına geçiş adı ver

.gallery-card seçicisi için bir bölüm yaz. Blokta view-transition-name: card-1 bildirimi olsun.

Örnek çözümü göster

/* kart geçiş adı */
.gallery-card {
  view-transition-name: card-1;
}

Kendini test et

Geçiş adını doğru biçimle yaz

/* karta geçiş adı ver */
.card {
  view-transition-name: ____;
}

Cevabı göster

/* karta geçiş adı ver */
.card {
  view-transition-name: gallery-card;
}

Aynı sayfada iki öğeye aynı view-transition-name değerini verirsen ne olur?
- İkisi de ayrı ayrı geçiş yapar
- Yalnızca ilk öğe geçiş yapar
- Geçiş atlanır, uygulanmaz
- İkisi tek geçişte birleşir
Cevabı göster

Geçiş atlanır, uygulanmaz — Doğru. Aynı adda birden fazla öğe olunca tarayıcı geçişi atlar.
view-transition-name değerlerini eşleştir

view-transition-name

Öğeyi geçiş için adlandırır
none

Geçiş adını kaldırır
root

Tüm sayfa için ayrılmış ad
custom-ident

Özel ad değeri

Uzman bölümündeki tüm dersler

View-transition-name