如何使用 Jquery 在滚动时触发 CSS @keyframe 动画？答案

【问题标题】：How do I trigger a CSS @keyframe animation on scroll using Jquery?如何使用 Jquery 在滚动时触发 CSS @keyframe 动画？
【发布时间】：2018-05-02 08:07:14
【问题描述】：

首先，我在使用jquery 在滚动上为这些box 元素设置动画时遇到了一点问题。我希望我的 animation 在滚动超过 section 的 1/4 时启动。
1. 其次，我的box div 过去是垂直居中的，但在过渡期间添加@keyframes 后，它们不再居中。如果您删除 animation-fill-mode: forwards，您可以看到它们在转换结束时如何恢复。
2. 最后一个问题.. 当我开始滚动时，可以使用jquery 为这两个框设置动画，而不必为每个sections 编写不同的代码吗？我在想，如果我在我的 box div 中添加一些常见的类应该可以工作，对吧？

最初，在我的jquery 文件中，我尝试在box div 上设置带有opacity:0 的hidden 类，当我开始滚动时，它会变成带有opacity:1 的showing 类。 . 但这并不顺利。

在 YouTube 上找到的其他解决方案也没有帮助。将其他人的代码与我的代码混合似乎效果不佳。

如您所见，没有 jquery 代码，因为在我的大脑开始乱用它之后，它变得一团糟，有一次我认为我应该重新开始。

Here 是我的 Codepen 的链接。

翡翠

.landing-page
.section-one
  .box-one
.section-two
  .box-two

SASS

@mixin box()
  position: absolute
  width: 200px
  height: 200px
  background: black
.landing-page
  height: 100vh
  width: 100vw
  background: gray
.section-one
  position: relative
  height: 100vh
  width: 100vw
  background: lightblue
  .box-one
    @include box()
    top: 50%
    right: 10%
    transform: translate(-50%,-50%)
    animation-name: box-one-animation
    animation-duration: 2s
    animation-fill-mode: forwards
.section-two
  position: relative
  height: 100vh
  width: 100vw
  background: lightgreen
  .box-two
    @include box()
    top: 50%
    left: 10%
    transform: translate(-50%,-50%)
    animation-name: box-two-animation
    animation-duration: 2s
    animation-fill-mode: forwards

@keyframes box-one-animation
  0%
    transform: translateX(0)  
  100%
    transform: translateX(-50%)
@keyframes box-two-animation
  0%
    transform: translateX(0)  
  100%
    transform: translateX(50%)

【问题讨论】：

标签： jquery html css sass

【解决方案1】：

首先，您需要为滚动事件设置一些事件侦听器，这样您可以触发基于 scrollPos 的动画，或者可能是偏移到顶部的元素。

这里是事件监听器：

https://developer.mozilla.org/en-US/docs/Web/Events/scroll

var last_known_scroll_position = 0;
var ticking = false;

function doSomething(scroll_pos) {
  // do something with the scroll position
  console.log(scroll_pos);
  if(scroll_pos > 200){
    console.log(document.getElementsByClassName('box-one')[0].classList);
     document.getElementsByClassName('box-one')[0].classList.add('animate-me');
  }
}

window.addEventListener('scroll', function(e) {
  last_known_scroll_position = window.scrollY;
  if (!ticking) {
    window.requestAnimationFrame(function() {
      doSomething(last_known_scroll_position);
      ticking = false;
    });
    ticking = true;
  }
});

查看doSomething 函数，您可以在这里定义偏移量或决定整体方法。对于 css 部分，只需弹出一个类，在该类上引用您的动画来触发动画。

笔在这里：https://codepen.io/cidicles/pen/gzWwEz

有很多很棒的库可以为您制作这些类型的动画，例如 Scroll Magic 或 Skrollr，但构建自己的动画总是更有趣:p。

https://github.com/Prinzhorn/skrollr
http://scrollmagic.io/

【讨论】：