在向上滚动时添加不同的CSS动画并使用jQuery向下滚动

Question

我正在尝试在用户向上和向下滚动时添加类以显示2 css动画。

如果我只使用向下滚动动画，它会很好用，但当我同时使用向上滚动和向下滚动动画时，它会不一致。

我遇到连续多次触发动画的问题。向下滚动暂停，向下滚动暂停，向上滚动暂停，向上滚动暂停。

Here's a jsFiddle to better demonstrate the problem.

和代码 -

(function () {
    var previousScroll = 0;

    $(window).scroll(function () {
        var currentScroll = $(this).scrollTop();
        if (currentScroll > previousScroll) {
            //down scroll code
            $("#repel").removeClass("climb");
            $("#repel").addClass("repel").delay(1150).queue(function (next) {
                $(this).removeClass("repel");
                next();
            });
        } else {
            // upscroll code
            $("#repel").removeClass("repel");
            $("#repel").addClass("climb").delay(1000).queue(function (next) {
                $(this).removeClass("climb");
                next();
            });
        }
        previousScroll = currentScroll;
    });
}());

Answer 1

我明白了......

我只需要改变动画的删除方式。我没有使用延迟和队列，而是检测到animation end并将其删除。

<强> Working Example

(function () {
    var previousScroll = 0;

    $(window).scroll(function () {
        var currentScroll = $(this).scrollTop();
        if (currentScroll > previousScroll) {
            //down scroll code
            $("#repel").addClass("repel");
            $("#repel").on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function () {
                $('#repel').removeClass('repel');
            });

        } else {
            // upscroll code
            $("#repel").addClass("climb");
            $("#repel").on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function () {
                $('#repel').removeClass('climb');
            });
        }
        previousScroll = currentScroll;
    });
}());