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%);
  }
});

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

Answer 1

动态地更改关键帧动画的css属性并不是一个好主意，即使从理论上讲它很容易，因为您永远也不知道将来还会有其他对象使用相同的关键帧。

您应该做的是将动画分配给CSS类，例如

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

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

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

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

1 个答案: