Bagaimanakah Saya Boleh Mencetuskan Animasi CSS dengan JavaScript pada Tatal Tanpa jQuery?

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:

1. Buat kelas CSS dengan sifat animasi.

   Contohnya:

   .animated {
     animation: my-animation 2s forwards;
   }

2. 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');
   });

3. 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:

  <style>
    .animated {
      animation: my-animation 2s forwards;
    }

    @keyframes my-animation {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }
  </style>


  <div></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!