Artikel ini akan memberikan prosedur untuk menjalankan fungsi JavaScript setelah animasi CSS.
Bagaimana Menjalankan JavaScript Setelah Animasi CSS Selesai?
Javascript menyediakan “ animasimulai ” & “ menjiwai ” peristiwa yang memungkinkan pengembang menjalankan fungsi Javascript setelah animasi dimulai atau diakhiri. Hal ini membuatnya sangat nyaman bagi pengembang untuk melakukan operasi apa pun setelah animasi selesai. Sintaks untuk menggunakan “ menjiwai ” acaranya sebagai berikut:
{ HTML elemen } . tambahkanEventListener ( 'menganimasikan' , Nama Fungsi ) ;
Dalam sintaks yang disediakan di atas, “ menjiwai ” disediakan sebagai argumen pertama ke event pendengar, diikuti dengan fungsi yang akan dijalankan setelah animasi berakhir. Sebuah ' pendengar acara ” dalam Javascript mengaktifkan fungsi yang diberikan setiap kali peristiwa tertentu terjadi.
Mari kita pahami bagaimana pengguna dapat menjalankan fungsi JavaScript setelah animasi CSS menggunakan sintaks yang ditentukan di atas. Dalam demonstrasi ini, sebuah kotak dianimasikan untuk bergerak ke bawah dan muncul kembali dalam bentuk “ empat ” detik. Setelah animasi selesai, sebuah pesan akan ditampilkan menggunakan fungsi JavaScript.
< html >
< gaya >
#DIV saya {
lebar : 150 piksel ;
tinggi : 150 piksel ;
posisi : relatif ;
latar belakang : hijau muda ;
}
@keyframes moveBox {
0 % { atas : 0 piksel ; }
lima puluh % { atas : 200 piksel ; latar belakang : Merah Jambu ; }
100 % { atas : 0 piksel ; latar belakang : hijau muda ; }
}
gaya >
< tubuh >
< h1 > Menjalankan JavaScript Setelah CSS Animasi h1 >
< h3 > Klik pada Kotak Di Bawah untuk Memulai Animasi h3 >
< p id = 'untuk' > P >
< id div = 'DIV saya' klik = 'Fungsi saya()' > div >
< naskah >
konstanta div1 = dokumen. dapatkanElementById ( 'DIV saya' ) ;
konstanta untuk = dokumen. dapatkanElementById ( 'untuk' ) ;
fungsi fungsi saya ( ) {
div1. gaya . animasi = 'pindahkan Kotak 6s' ;
}
div1. tambahkanEventListener ( 'animasi dimulai' , mulaiFungsi ) ;
div1. tambahkanEventListener ( 'menganimasikan' , Fungsi akhir ) ;
fungsi startFunction ( ) {
untuk. innerHTML = 'Animasi telah dimulai...' ;
}
fungsi akhirFungsi ( ) {
untuk. innerHTML = 'Animasinya telah berakhir!' ;
untuk. gaya . warna = 'merah' ;
}
naskah >
tubuh >
html >
Penjelasan kode di atas adalah sebagai berikut:
- Dalam '
” tag, elemen dengan id “ DIV saya ” dilengkapi dengan properti CSS. - Selanjutnya, sebuah “ bingkai utama ' bernama ' pindahkanBox ” dibuat untuk tujuan animasi. Ia memiliki tiga keadaan transisi. Transisi pertama adalah dari “ 0% ' ke ' lima puluh% ”. Kemudian, transisi selanjutnya adalah dari “ lima puluh% ' ke ' 100% ”.
- Kemudian, di dalam tag tubuh, “ h1 ” & “ h3 ” elemen dibuat.
- A ' ” elemen dengan id “ untuk ' dibuat.
- A ' div ” elemen dengan id “ DIV saya ' dibuat. Juga, fungsi bernama “ fungsi saya() ” disediakan untuk “ klik ” atribut elemen div.
- Selanjutnya, di dalam “
” tag, dua konstanta dibuat. Konstanta ini menunjuk ke arah elemen HTML menggunakan “ .getElementByID() ' metode. - Sebuah fungsi bernama “ fungsi saya() ' dibuat. Fungsi ini akan menganimasikan “ DIV saya ” elemen menggunakan “ pindahkanBox ” bingkai utama.
- Selanjutnya, dua pendengar acara dibuat yang memanggil fungsi yang ditentukan pada “ animasimulai ” acara dan “ menjiwai ' peristiwa.
- Kemudian, dua fungsi untuk kejadian yang disebutkan di atas ditentukan.
Keluaran:
Hal ini dapat dilihat pada output di bawah ini ketika pengguna mengklik kotak tersebut, animasi dimulai. Dalam proses animasi, kotak berubah, bergerak 200px ke bawah dan kembali ke tempat semula. Selama pergerakan, warnanya juga berubah dari hijau menjadi merah muda dan kemudian menjadi hijau lagi. Selanjutnya, pesan “ Animasi telah berakhir! ” ditampilkan menggunakan fungsi Javascript yang dijalankan setelah animasi CSS selesai.
Itu semua tentang menjalankan fungsi JavaScript setelah menyelesaikan animasi CSS.
Kesimpulan
Untuk menjalankan fungsi JavaScript setelah animasi CSS selesai, pengguna dapat menggunakan event listening. Untuk itu, pengguna harus menyediakan “ menjiwai ” acara sebagai argumen pertama, dan fungsi sebagai argumen kedua untuk pendengar acara. Fungsi yang ditentukan akan dijalankan setelah animasi selesai. Artikel ini telah menyediakan prosedur untuk menjalankan fungsi Javascript setelah animasi CSS.