Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Mencetuskan Animasi CSS dengan JavaScript pada Tatal Tanpa jQuery?
Bagaimanakah Saya Boleh Mencetuskan Animasi CSS dengan JavaScript pada Tatal Tanpa jQuery?
- Barbara Streisandasal
- 2024-12-10 22:41:10480semak imbas
Cetus Animasi CSS dalam JavaScript tanpa jQuery
Masalah:
Anda mahu mencetuskan animasi CSS apabila pengguna menatal halaman tetapi tanpa menggunakan jQuery.
Penyelesaian:
Salah satu cara untuk mencetuskan animasi CSS dalam JavaScript ialah dengan menggunakan sifat classList. Begini cara anda boleh melakukannya:
-
Buat kelas CSS dengan sifat animasi.
Contohnya:
.animated { animation: my-animation 2s forwards; } -
Tambahkan pendengar acara pada dokumen.
Acara tatal dicetuskan apabila pengguna menatal halaman. Anda boleh menggunakan acara ini untuk mencetuskan animasi anda. Begini caranya:
document.addEventListener('scroll', (event) => { // Get the element you want to animate. const element = document.getElementById('my-element'); // Add the 'animated' class to the element. element.classList.add('animated'); }); -
Alih keluar kelas 'animasi' apabila animasi selesai.
Anda boleh menggunakan acara akhir animasi untuk mengesan apabila animasi telah selesai. Begini caranya:
element.addEventListener('animationend', (event) => { // Remove the 'animated' class from the element. element.classList.remove('animated'); });
Contoh:
Berikut ialah contoh lengkap cara mencetuskan animasi CSS apabila pengguna menatal halaman:
<!DOCTYPE html>
<html>
<head>
<style>
.animated {
animation: my-animation 2s forwards;
}
@keyframes my-animation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div>Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencetuskan Animasi CSS dengan JavaScript pada Tatal Tanpa jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!