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

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

Barbara Streisand

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

Original

483 Leute haben es durchsucht

How Can I Trigger CSS Animations with JavaScript on Scroll Without jQuery?

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:

Erstellen Sie eine CSS-Klasse mit den Animationseigenschaften.

Zum Beispiel:
```
.animated {
  animation: my-animation 2s forwards;
}
```
Nach dem Login kopieren

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

Nach dem Login kopieren

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');
});
```
Nach dem Login kopieren

Beispiel:

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

<!DOCTYPE html>
<html>
<head>
  <style>
    .animated {
      animation: my-animation 2s forwards;
    }

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

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

Nach dem Login kopieren

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!