jquery - 根据滚动方向有2种不同的动画

我创建了一个动画，该动画向下滚动div中的一段文本，然后我认为如果动画方向（向上或向下）根据滚动方向动态变化（如果向下滚动，则文本滚动）会很有趣。如果您向上滚动，文本也会改变方向，也向上滚动）。问题是我不知道如何使用jQuery更改关键帧CSS的适当性。有什么解决办法吗？

@keyframes spam {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 100%);
  }
}

和jQuery来获得方向：

 $(window).bind('mousewheel', function(event) {
  if (event.originalEvent.wheelDelta >= 0) {
    // don't change anything
  } else {
    // change the keyframe 100% propriety from transform: translate(0, 100%) to transform: translate(0, -100%);
  }
});

我现在看到的唯一解决方案是复制文本，为它提供另一个动画，该动画可以向上滚动文本并根据滚动方向隐藏/显示这两个不同的文本动画。
对不起，我的英语不好。

最佳答案

即使理论上很简单，动态更改关键帧动画的css属性也不是一个好主意，因为您永远都不知道将来还会有什么意外使用相同的关键帧。

您应该做的是将动画分配给CSS类，所以类似

.animate-spam {
    animation-name:spam;
    animation-duration:1s;
    animation-fill-mode: forwards;
}

用于当前动画，然后用于另一个滚动方向的另一个关键帧和类。然后，您的解决方案就像添加和删除类一样容易。

由于您提到过使用的是jQuery，所以您也可以只使用内置的.animate（）函数，它对于像这样的简单应用程序可能会更容易。

关于jquery - 根据滚动方向有2种不同的动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54656073/