Geçiş animasyonları
View transition için özel animasyon öğrenirsin.
@keyframes ile özel geçiş
Varsayılan çapraz çözülme yerine kendi animasyonunu yazabilirsin. Bunun için önce @keyframes ile animasyon karelerini tanımlarsın: from { opacity: 1 } başlangıç, to { opacity: 0 } bitiş karesidir.
Sonra bu kareleri bir geçiş pseudo-elementine animation özelliği ile bağlarsın. Örneğin ::view-transition-old(root) için animation: fade-out 0.4s forwards yazınca eski görüntü 0.4 saniyede silinir.
Eski ve yeni için ayrı animasyon
Eski ve yeni görüntü için ayrı animasyon yazmak istersen, ::view-transition-old(root) ve ::view-transition-new(root) seçicilerine animation bildirimi verebilirsin.
Örneğin eski görüntü dışarı kayarken yeni görüntü içeride belirebilir. Eski görüntüye animation: slide-out 0.4s forwards, yeni görüntüye animation: slide-in 0.4s forwards yazarsan; her biri kendi @keyframes kümesine bağlanır.
Uygulama Eski görüntüye fade-out animasyonu bağla
İki bölüm yaz. Birincisi @keyframes fade-out olsun; from { opacity: 1 } ve to { opacity: 0 } karelerini içersin. İkincisi ::view-transition-old(root) seçicisi olsun; blokta animation: fade-out 0.4s forwards bildirimi bulunsun.
Örnek çözümü göster
/* kök eski görüntü için silinme animasyonu */
@keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
::view-transition-old(root) {
animation: fade-out 0.4s forwards;
}Kendini test et
-
Bir @keyframes kümesini ::view-transition-old(root) üzerinde çalıştırmak için hangi CSS özelliği kullanılır?
- transition
- transition-name
- view-transition-name
- animation
Cevabı göster
animation — Doğru. animation özelliği @keyframes kümesini bir öğeye bağlar.
-
Animasyonun son kipini tamamla
/* eski görüntü dışarı kayar */ ::view-transition-old(root) { animation: slide-out 0.4s ____; }Cevabı göster
/* eski görüntü dışarı kayar */ ::view-transition-old(root) { animation: slide-out 0.4s forwards; } -
@keyframes parçalarını eşleştir
- @keyframes
- Animasyon karelerini tanımlar
- from
- Başlangıç karesi (0%)
- to
- Bitiş karesi (100%)
- animation-name
- Hangi @keyframes kullanılacağını söyler