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ş