如何在不使用 jQuery 的情况下使用 JavaScript 在滚动上触发 CSS 动画？-css教程-PHP中文网

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

首页

web前端

css教程

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

Barbara Streisand

Dec 10, 2024 pm 10:41 PM

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.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' 类。

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

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

登录后复制

示例：

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

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

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

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

登录后复制

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

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn