javascript - 当内容在视口(viewport)中时应用 css 动画(连同 pagepiling.js)

Question

当内容进入视口(viewport)时，我正在尝试对其进行动画处理。但问题是，jquery(用于检查内容是否在视口(viewport)中)不起作用，因为我也在使用 pagepiling.js(http://alvarotrigo.com/pagePiling/)。我不知 Prop 体原因，但我认为这可能是由于使用 pagepiling.js 的不同页面的位置造成了问题。有什么解决办法吗？(基本上，我想要类似 this 的东西)

<link rel="stylesheet" type="text/css" href="animate.css" />  <!-- animate.css css3 library   -->
<script src="viewportchecker.js"></script>      <!-- viewportchecker plugin   -->
<script type="text/javascript" src="jquery.pagepiling.min.js"></script>

<style>
.hidden{
     opacity:0;
}
.visible{
     opacity:1;
}
</style>

<script>
var deleteLog = false;
$(document).ready(function() {
$('#pagepiling').pagepiling({
menu: '#menu',
anchors: ['page1', 'page2', 'page3'],
sectionsColor: ['#bfda00', '#693575', '#2C3E50', '#51bec4'],
easing: 'linear'
});
});

jQuery(document).ready(function() {
jQuery('.post').addClass("hidden").viewportChecker({
classToAdd: 'visible animated fadeIn',
offset: 100
});
});
</script>

<div id="pagepiling">
    <div class="section" id="section1">
    <div class="intro">
         <div class="post"> <!-- Post content goes here --> </div>
    </div>
    </div>

    <div class="section" id="section2">
    <div class="intro">
        <div class="post"> <!-- Post content goes here --> </div>
    </div>
    </div>

</div>

Answer 1

如果您阅读 pagePiling.js documentation您会发现它为您提供回调，例如 afterLoad , onLeave ...

只需像文档中详述的那样使用它们:

$('#pagepiling').pagepiling({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

    afterLoad: function(anchorLink, index){
        //using index
        if(index == 3){
            alert("Section 3 ended loading");
        }

        //using anchorLink
        if(anchorLink == 'secondPage'){
            alert("Section 2 ended loading");
        }
    }
});