Cetuskan Animasi CSS dalam JavaScript

Jika tiada jQuery, mencetuskan animasi CSS melalui JavaScript ialah pilihan yang berdaya maju. Panduan ini menyediakan kaedah ringkas untuk mencapai perkara ini apabila pengguna menatal halaman.

Mencetuskan Animasi CSS dengan Manipulasi Kelas

Pendekatan paling mudah untuk mencetuskan animasi CSS ialah dengan mengubah suai kehadiran kelas, membenarkan gaya yang ditakrifkan dalam berkuat kuasa. Untuk mencapai ini dengan JavaScript tulen:

function addClass(element, className) {
  element.classList.add(className);
}

function removeClass(element, className) {
  element.classList.remove(className);
}

Dalam contoh yang anda berikan, anda mempunyai kelas CSS untuk animasi yang telah ditakrifkan: "anim" dan "anim2." Anda boleh memulakan animasi dengan menambahkan kelas ini pada elemen masing-masing:

function start() {
  addClass(document.getElementById('logo'), 'anim');
  addClass(document.getElementById('earthlogo'), 'anim2');
}

Mencetuskan Animasi pada Tatal Halaman

Akhir sekali, untuk memulakan animasi apabila halaman itu ditatal, anda boleh menggunakan "window.addEventListener" fungsi:

window.addEventListener('scroll', start);

Ini akan menggunakan fungsi "mula" anda apabila halaman itu ditatal, mencetuskan animasi CSS.

Nota Tambahan

Animasi yang ditakrifkan dalam CSS menggunakan bingkai utama boleh dicetuskan dengan cara yang sama dengan menambah atau mengalih keluar kelas. Walau bagaimanapun, adalah penting untuk memastikan bahawa elemen yang dipersoalkan mempunyai sifat peralihan yang ditentukan untuk membolehkan animasi berkuat kuasa.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencetuskan Animasi CSS dengan JavaScript pada Tatal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!