如何在不使用 jQuery 的情况下使用 JavaScript 在滚动上触发 CSS 动画？

在没有 jQuery 的 JavaScript 中触发 CSS 动画

问题：

您想要在用户滚动时触发 CSS 动画页面但没有使用jQuery.

解决方案：

在 JavaScript 中触发 CSS 动画的一种方法是使用 classList 属性。操作方法如下：

1. 使用动画属性创建一个 CSS 类。

   例如：

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

2. 添加事件监听器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');
   });

3. 动画完成时移除 'animated' 类。

   可以使用animationend 事件来检测当动画结束时。操作方法如下：

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

示例：

以下是如何在用户滚动页面时触发 CSS 动画的完整示例：

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

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

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


  <div></div>

以上是如何在不使用 jQuery 的情况下使用 JavaScript 在滚动上触发 CSS 动画？的详细内容。更多信息请关注PHP中文网其他相关文章！