0

我正在使用 scrollify 来换出固定位置的组件，并添加/删除类来为过渡设置动画。当您在滚动中前进时，我已经按照我的意愿进行了所有工作，但是当您向上滚动以查看上一节时，它不会删除上一个课程，并且上一节现在在其后面进行动画处理。

我不认为 prev 方法会有用，因为它不会调用您所在的上一部分，只是假设您一直在前进的上一部分。

下面是我的代码，您可以向前移动，但是尝试向后移动会出现问题，因为新的当前部分将加载到前一个部分之后，而前一个部分仍然可见。

jsfilddle在这里

var wrapper = $('.wrapper');
var currentPosition = 0;

$(wrapper).each(function(index) {
    if (currentPosition != index) {
        $(this).css('opacity', 0);
    } else if (currentPosition == index) {
        $(this).css('opacity', 1);
    }
});


$(function() {
    $.scrollify({
        section: ".wrapper",
        scrollSpeed: 700,
        setHeights: false,
        after: function(index, sections) {
            var prevWrapper = $.scrollify.current().prev();
            var currentWrapper = $.scrollify.current();
            var nextWrapper = $.scrollify.current().next();

            $(prevWrapper).removeClass('wrapper-enter').addClass('wrapper-leave');
            $(currentWrapper).removeClass('wrapper-leave').addClass('wrapper-enter');
        },
    });
});
4

1 回答 1

3

问题取决于向上或向下滚动您的“下一个”或“上一个”实际上可能不是您的想法，因此您错误地隐藏了类。

当 scrollify 没有检测滚动方向的选项时，您可以做的是创建一个超级快速变量，该变量将检测您是向上还是向下滚动。然后只需在 after 函数中更新您的类。

$.scrollify({
        section: ".wrapper",
        scrollSpeed: 700,
    setHeights: false,
        after: function(index, sections) {
    var prevWrapper = $.scrollify.current().prev();
            var currentWrapper = $.scrollify.current();
            var nextWrapper = $.scrollify.current().next();
            let elem = null;

      // Add wrapper-enter to current element. 
      $(currentWrapper).removeClass('wrapper-leave').addClass('wrapper-enter');
            if(lastIndex < index) {
          // Scolled down if lastIndex < index
          elem = prevWrapper;
        } else {
          // Scrolled up if last index > index
          elem = nextWrapper;
      }
      $(elem).removeClass('wrapper-enter').addClass('wrapper-leave'); 
      lastIndex = index;
        },

在上面我只是创建了一个变量来跟踪最后一个索引。

这是一个工作小提琴：https ://jsfiddle.net/k1e6x79f/

于 2019-06-24T19:13:09.927 回答