jquery - 2 基于滚动方向的不同动画

Question

我创建了一个动画，它在 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%);
  }
});

我现在看到的唯一解决方案是复制文本，给它另一个向上滚动文本的动画，并根据滚动方向隐藏/显示这 2 个不同的文本动画。 抱歉我的英语不好。

Answer 1

动态更改关键帧动画的 css 属性不是一个好主意，即使它在理论上很容易，因为您永远不知道将来还有什么可能毫无戒心地使用相同的关键帧。

你应该做的是将动画分配给 css 类，比如

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

为您当前的动画，然后是另一个关键帧和另一个滚动方向的类。那么您的解决方案就像添加和删除类一样简单。

既然你提到你在使用 jQuery，你也可以只使用内置的 .animate() 函数，这对于像这样的简单应用程序来说可能更容易。