Wie kann ich CSS-Animationen mit JavaScript beim Scrollen ohne jQuery auslösen?

CSS-Animationen in JavaScript ohne jQuery auslösen

Problem:

Sie möchten eine CSS-Animation auslösen, wenn der Benutzer scrollt die Seite, aber ohne zu verwenden jQuery.

Lösung:

Eine Möglichkeit, CSS-Animationen in JavaScript auszulösen, ist die Verwendung der classList-Eigenschaft. So können Sie es machen:

1. Erstellen Sie eine CSS-Klasse mit den Animationseigenschaften.

   Zum Beispiel:

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

2. Fügen Sie einen Ereignis-Listener hinzu Dokument.

   Das Scroll-Ereignis wird immer dann ausgelöst, wenn der Benutzer auf der Seite scrollt. Mit diesem Ereignis können Sie Ihre Animation auslösen. So geht's:

   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. Entfernen Sie die Klasse „animiert“, wenn die Animation abgeschlossen ist.

   Sie können das Animationend-Ereignis zur Erkennung verwenden wenn die Animation beendet ist. So geht's:

   element.addEventListener('animationend', (event) => {
     // Remove the 'animated' class from the element.
     element.classList.remove('animated');
   });

Beispiel:

Hier ist ein vollständiges Beispiel dafür, wie eine CSS-Animation ausgelöst wird, wenn der Benutzer auf der Seite scrollt:

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

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

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


  <div></div>

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Animationen mit JavaScript beim Scrollen ohne jQuery auslösen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!