如何在不使用 jQuery 的情況下使用 JavaScript 在滾動上觸發 CSS 動畫？-css教學-PHP中文網

如何在不使用 jQuery 的情況下使用 JavaScript 在滾動上觸發 CSS 動畫？

Barbara Streisand

發布： 2024-12-10 22:41:10

原創

486 人瀏覽過

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

在沒有 jQuery 的 JavaScript 中觸發 CSS 動畫

問題：

您想要在使用者捲動時觸發 CSS動畫頁面但沒有使用jQuery.

解決方案：

在 JavaScript 中觸發 CSS 動畫的一種方法是使用 classList 屬性。操作方法如下：

使用動畫屬性來建立一個 CSS 類別。

例如：
```
.animated {
  animation: my-animation 2s forwards;
}
```
登入後複製

新增事件監聽器document.

新增事件監聽器document.

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

登入後複製

動畫完成時移除 'animated' 類別。

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

登入後複製

範例：

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

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

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

登入後複製

以下是如何在使用者捲動頁面時觸發CSS 動畫的完整範例：

以上是如何在不使用 jQuery 的情況下使用 JavaScript 在滾動上觸發 CSS 動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！