Meydan okuma - View transitions

View transitions ile sayfa geçişli uygulama kurarsın.

View transition ile geçiş

View transitions, iki görünüm arasındaki geçişi animasyonlu hale getirir. Bir elemana view-transition-name: card verdiğinde o eleman geçişe katılır ve aynı adla karşı tarafta eşleşir.

Geçiş süresini ::view-transition-old(card) ve ::view-transition-new(card) sözde elementlerinde animation-duration ile ayarlarsın. Aynı belge içinde geçiş kodla başlatılır; belgeler arası geçişler için @view-transition { navigation: auto } bildirimi kullanılır.

Uygulama View transition kartını kur

Bir ürün kartına view transition ekle. .product-card etiketinde view-transition-name: card bildirimi olsun. ::view-transition-old(card) sözde elementinde animation-duration: 0.4s bildirimi olsun. ::view-transition-new(card) sözde elementinde animation-duration: 0.4s bildirimi olsun.

Örnek çözümü göster

/* ürün kartı */
.product-card {
  view-transition-name: card;
}

/* eski görüntü */
::view-transition-old(card) {
  animation-duration: 0.4s;
}

/* yeni görüntü */
::view-transition-new(card) {
  animation-duration: 0.4s;
}

Kendini test et

view-transition-name bildirimini yaz

.product-card {
  ____: card;
}

Cevabı göster

.product-card {
  view-transition-name: card;
}

Belgeler arası view transition hangi bildirimle etkinleştirilir?
```
@view-transition {
  /* ??? */
}
```
- @cross-document { enabled: true }
- view-transition-mode: cross-document
- navigation: auto
- document-transition: enabled
Cevabı göster

navigation: auto — Doğru. @view-transition bölümünde navigation: auto, belgeler arası geçişi açar.
View transition parçalarını eşleştir

view-transition-name

Elemanı geçişe bağlar
::view-transition-old

Eski görüntü sözde elementi
::view-transition-new

Yeni görüntü sözde elementi
@view-transition

Belgeler arası geçiş

Sıradaki ders: Meydan okuma - Anchor panel

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler