基于animate和fullpage制作动画页面的总结

$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

注：jQuery.one（） 最多执行事件处理一次。

#yourElement {
-vendor-animation-duration: 3s;/*动画执行时间*/
-vendor-animation-delay: 2s; /*延迟秒数*/
-vendor-animation-iteration-count: infinite; /*执行一次*/
}

fullpage的afterLoad方法中注意点：

anchorLink和index分别是锚链接名称（section）和 序号（对应锚链接）。

<div class="section section1"></div>
<div class="section section2"></div>
<div class="section section3"></div>
<div class="section section4"></div>

利用if语句判断页面锚链接的序号。

　　

afterRender: function(){
if(index == 1){
//这里做一些操作
}
}

使用addClass改变标签属性，将标签属性改为所需要的动画（注：每一页（section）的动画必须写在相对应的if语句中）。

　　

需要有动画的标签除了第一页（section），都需要设置隐藏属性display:none;否则所有的section会同时执行动画，导致其他页面动画提前执行。

　　此条比较重要：比如<div class="animated fadeInLeft" id="div1"></div>则需要在CSS中将#div1设为display:none。

　　然后可以直接在ＣＳＳ中.active #div1{display:block;}这样来用。因为fullpage.js会将当前页自动加上.active类。
在相对应的if中使用show方法使其显示。

 可以直接在CSS中写。如果不行再用jquery的show()方法。