在 JavaScript 中触发 CSS 动画

在没有 jQuery 的情况下，通过 JavaScript 触发 CSS 动画是一个可行的选择。本指南提供了一种简洁的方法来在用户滚动页面时实现此目的。

使用类操作触发 CSS 动画

触发 CSS 动画的最简单方法是修改类的存在，允许其中定义的样式生效。要使用纯 JavaScript 完成此操作：

function addClass(element, className) {
  element.classList.add(className);
}

function removeClass(element, className) {
  element.classList.remove(className);
}

登录后复制

在您提供的示例中，您已经定义了动画的 CSS 类：“anim”和“anim2”。您可以通过将这些类添加到相应的元素来启动动画：

function start() {
  addClass(document.getElementById('logo'), 'anim');
  addClass(document.getElementById('earthlogo'), 'anim2');
}

登录后复制

在页面滚动时触发动画

最后，在页面滚动时启动动画滚动后，您可以使用“window.addEventListener”函数：

window.addEventListener('scroll', start);

登录后复制

这将调用您的每当页面滚动时，“start”函数就会触发 CSS 动画。

附加说明

使用关键帧在 CSS 中定义的动画可以通过添加或删除类来类似地触发。但是，必须确保相关元素具有定义的过渡属性以使动画生效。

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