Bu makale, bir CSS animasyonundan sonra bir JavaScript işlevini çalıştırma prosedürünü sağlayacaktır.
CSS Animasyonu Bittikten Sonra JavaScript Nasıl Çalıştırılır?
Javascript şunu sağlar: animasyon başlangıcı ” & “ animasyonlu Bir animasyon başladığında veya bittiğinde geliştiricinin bir Javascript işlevini çalıştırmasına olanak tanıyan olaylar. Bu, geliştiricilerin animasyon bittikten sonra herhangi bir işlemi gerçekleştirmesini gerçekten kolaylaştırır. “'yi kullanmak için sözdizimi animasyonlu ” olayı şu şekildedir:
{ HTML eleman } . addEventListener ( 'canlandırma' , Fonksiyon adı ) ;
Yukarıda verilen sözdiziminde, “ animasyonlu ”, olay dinleyicisine ilk argüman olarak sağlanır ve ardından animasyon sona erdiğinde yürütülecek işlev gelir. Bir ' olay dinleyicisi ” Javascript'te belirli bir olay meydana geldiğinde kendisine verilen işlevi başlatır.
Yukarıda tanımlanan sözdizimini kullanarak bir kullanıcının bir CSS animasyonundan sonra bir JavaScript işlevini nasıl çalıştırabileceğini anlayalım. Bu gösteride, bir kutunun aşağı inip tekrar yukarı çıkması için animasyon yapılmıştır. dört ” saniye. Animasyon tamamlandıktan sonra JavaScript işlevi kullanılarak bir mesaj görüntülenecektir.
< HTML >
< stil >
#benimDIV'im {
Genişlik : 150 piksel ;
yükseklik : 150 piksel ;
konum : akraba ;
arka plan : açık yeşil ;
}
@keyframes moveBox {
0 % { tepe : 0 piksel ; }
elli % { tepe : 200 piksel ; arka plan : pembe ; }
100 % { tepe : 0 piksel ; arka plan : açık yeşil ; }
}
stil >
< vücut >
< h1 > Sonrasında JavaScript Çalıştırma CSS Animasyon h1 >
< h3 > Animasyonu Başlatmak İçin Aşağıdaki Kareye Tıklayın h3 >
< kimlik kimliği = 'için' > P >
< bölüm kimliği = 'benimDIV'im' tıklamada = 'İşlevim()' > div >
< senaryo >
yapı div1 = belge. getElementById ( 'benimDIV'im' ) ;
yapı için = belge. getElementById ( 'için' ) ;
işlevimİşlevim ( ) {
div1. stil . animasyon = 'moveBox 6s' ;
}
div1. addEventListener ( 'animasyon başlangıcı' , başlangıçFonksiyonu ) ;
div1. addEventListener ( 'canlandırma' , bitişFonksiyonu ) ;
işlev başlatmaİşlevi ( ) {
için. içHTML = 'Animasyon başladı...' ;
}
fonksiyon sonuFonksiyon ( ) {
için. içHTML = 'Animasyon sona erdi!' ;
için. stil . renk = 'kırmızı' ;
}
senaryo >
vücut >
HTML >
Yukarıdaki kodun açıklaması şu şekildedir:
- İçinde '
” etiketleri, kimliğine sahip öğe “ benimDIV'im ” CSS özellikleriyle sağlanır. - Daha sonra bir “ ana kare 'adlı' hareket kutusu ” animasyon amaçlı oluşturulmuştur. Üç geçiş durumu vardır. İlk geçiş “dan olacaktır” %0 ' ile ' elli% ”. Daha sonra bir sonraki geçiş ''den olacaktır' elli% ' ile ' 100% ”.
- Daha sonra gövde etiketlerinin içinde “ h1 ” & “ h3 ” elemanları oluşturulur.
- A ' ”kimliği olan öğe” için ' yaratıldı.
- A ' div ” kimliğine sahip öğe” benimDIV'im ' yaratıldı. Ayrıca “adlı bir fonksiyon işlevim() ''e sağlanır tıklamada div öğesinin ” özelliği.
- Daha sonra, “içinde