Bagaimanakah Saya Boleh Mencetuskan Animasi CSS dengan JavaScript pada Tatal Tanpa jQuery?-tutorial css-php.cn

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

Barbara Streisand

Lepaskan： 2024-12-10 22:41:10

asal

483 orang telah melayarinya

How Can I Trigger CSS Animations with JavaScript on Scroll Without 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:

Buat kelas CSS dengan sifat animasi.

Contohnya:
```
.animated {
  animation: my-animation 2s forwards;
}
```
Salin selepas log masuk

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

Salin selepas log masuk

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');
});
```
Salin selepas log masuk

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>

Salin selepas log masuk

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!