Question

因此，我一直在使用divPeek在我正在处理的页面上触发动画，因为它非常简单易用，而且我不是jQuery的专家。

我很想知道，如果我能得到一些关于这个插件的帮助。当前它向下滚动时工作正常，动画触发。当您向上滚动到页面顶部并再次向下滚动时，动画每次都会再次触发。我想知道是否有一种方法可以在已经被触发一次之后再次发生转变。

我知道它为在视图中或视图外观看的元素添加了一个类，但我不确定在查看的元素之上添加另一个类是否可以解决问题。我至少没有能够让它发挥作用。

任何帮助将不胜感激。谢谢！

编辑：所以这是我在sass中使用转换的其中一个元素的代码。 divPeek代码监视＃project1和#project2并附加outViewPort和inViewPort，具体取决于元素在屏幕中的时间，并且发生转换。我想要的是动画仅在第一次出现在ViewPort中时发生，但是而不是随后增加这个课程。

SASS：

.triangle {
    width: 0;
    height: 0;
    border-top: 250px solid yellow;
    border-right: 150px solid transparent;
    @include transition(margin 0.2s ease-in, border 0.2s ease-in, opacity 0.2s ease-in); 
    li:nth-child(even) & {
        float:right;
        border-right: 0px;
        border-left: 150px solid transparent;
    }
    #project1.outViewPort &,
    #project2.outViewPort & {
        margin-top:30px;
        border-right: 0px solid transparent;
        border-left: 0px solid transparent;
        opacity:0.8;
    }
}

divPeek.js

var elementsToTrack = ["#project1","#project2","#scrollfx3","#scrollfx4","#scrollfx5","#scrollfx6","#scrollfx7"];

var pixelOffset = -24;
var inClassName = "inViewPort";
var outClassName = "outViewPort";
//===============================================================================

//add function to see of elements exist (otherwise removing an elemnet from DOM but not from array breaks everything)
jQuery.fn.exists = function(){return this.length>0;}

//define vars out of scope
var viewPortHeight = $(window).height();
var scrollFromTop = $(window).scrollTop();
var scrollFromBottom = (parseInt(scrollFromTop)+parseInt(viewPortHeight));

//function for recalculating all positioning vars in scroll/resize
function recalcVars(){
    viewPortHeight = $(window).height();
    scrollFromTop = $(window).scrollTop();
    scrollFromBottom = (parseInt(scrollFromTop)+parseInt(viewPortHeight));
    for (var i = 0; i < elementsToTrack.length; i++) {
        if ($(elementsToTrack[i]).exists()) {
            checkInViewport(scrollFromBottom, elementsToTrack[i]);
        }
    }
}

//catch window events
$(window).resize(function(e){recalcVars();});
document.addEventListener("touchmove", ScrollStart, false);
document.addEventListener("scroll", Scroll, false);
function ScrollStart(){recalcVars();}
function Scroll(){recalcVars();}

//function that handles if an element is in the viewport or not 
function checkInViewport(scrollBottom, domElement){
    var elementPos = $(domElement).offset().top;
    if((parseInt(scrollBottom)+parseInt(pixelOffset)) > elementPos){
        $(domElement).addClass(inClassName).removeClass(outClassName);
    } else {
        $(domElement).removeClass(inClassName).addClass(outClassName);
    }
}

divPeek mod保持转换不会发生在已经可见的元素上

0 个答案: