##使用

###1. 起步 插件依赖于一个animate.css还有scroll.js两个文件，需要在页面中引入，其中scroll.js依赖于Zepto或者jQuery的几个方法，所以还需要引入zepto或者jQuery

<link type="text/css" href="animate.css" /> 
<script src="js/zepto.js"></script>
<script src="js/scroll.js"></script>

###2. 基本模板

<div class="pt-pageList">
	<div class="pt-page">/*直接加载出来*/</div>
	<div class="pt-page" data-animate="bounceUp">
	    /*以bounceUp方式动画*/
	</div>
	<div class="pt-page lazyload" data-animate="bounceUp" data-bg="">
	    /*对有背景图的进行惰性加载，并以bounceUp方式动画*/
	</div>
	<div class="pt-page">
	    <h1>/*页面切换完就有*/</h1>
		<h1 class="bounceUp removeable delay2">/*切换完后延迟动画*/</h1>
		<img data-src="" class="lazyload">/*每一页中的图片元素也支持惰性加载*/
	</div>
	...
</div>

(1)　父元素上需要加类.pt-pageList(可以在less中修改，重新构建)

(2)　子元素即每一页需要加类pt-page(可以在less中修改，重新构建)

(3)　data-animate=""这里可以填写需要的页面切换之间的动画，一共有××种，详见文档最后的附录部分(关于这个animate属性，支持重新配置，如果有冲突可以在js中进行赋值)

(4)　data-bg=""对于每一页设置背景图片还需要进行惰性加载的页面，可以将背景图的地址放在这里（暂不支持bg名字的重新配置），同时元素需要再加一个类lazyload

(5)　对于每一个页面中的元素，可以自行进行定位样式的设置，如果需要对每一页中的元素进行动画配置，则只需要对该元素加上class为"removeable　bounceUp delay2"，除了延迟的类以外其他都是必须的且都不可配置

    bounceUp /*动画的名字，种类见附录*/
    delay2 /*动画延迟时间，可自行定义类加入，若没有则无延迟*/
    关于延迟，默认提供了四种方案(不够可自行进行写css)
    A. delay1 :延迟0.2s
    B. delay2 :延迟1S
    C. delay3 :延迟1.2S
    D. delay4 :延迟2S

(6)　对于每一页的图片元素也支持惰性加载，只需要在img标签中加一个data-src（不可配置）和一个类lazyload（可配置），当然这里同时还可以继续添加动画

###３.　使用方法

var slid = new SlidePage({
    /*@required:传入父节点的类或者ＩＤ*/
	container : "",
	/*自定义节点动画属性data-animate，修改animate名字默认为animate*/
	attr : "",
	/*节点中的类lazyload，可以进行配置，不传试用默认*/
	lazyClass : "",
	/*自定义惰性加载的数量，默认是３，既页面中至少会加载三个页*/
	preLoadNum : ,
}),
mainBody = $("#pt-main");
mainBody.on('swipeDown',function(){
	slid.prePage();/*上一页*/
})

mainBody.on('swipeUp',function(){
	slid.nextPage();/*下一页*/
})

###4.　动画介绍

动画来源自Animate.css，这里仅仅是对动画进行整理分类，构建为less文件，原有的一些零散的动画，将他整理到一起，比如一个bounceUp动画，按照原来的路径退出，这里整理为bounceUp out的类，具体的动画支持如下 (1)　bounce类

bounce、bounceUp、bounceRight、bounceDown、bounceLeft

(2)　fade类

fade、fadeUp、fadeUpBig、fadeRight、fadeRightBig、fadeDown、fadeDownBig、fadeLeft、fadeLeftBig

(3)　flip类

flipX、flipY

(4)　rotate类

rotate、rotateDownLeft、rotateDownRight、rotateUpLeft、rotateUpRight

(5) slide类

slideUp、slideRight、slideDown、slideLeft

(6) zoom类

zoom、zoomUp、zoomRight、zoomDown、zoomLeft

###５.选择用到的css进行打包 为了将最后的动画css文件最小，力求需要动画的css打进来，不用的不加载，所以提供了一个config.json的文件，来进行配置，默认的情况下，所有的动画都是true，即开启，你可以根据自行需要将不需要的动画选项设置为false，然后grunt（css无压缩）or grunt:pro(css进行了压缩)

注：图片来源于百度＆＆谷歌