之前我们提到了在Swiper中增加动画会使图片变得更加生动,那么怎么添加动画呢?
Swiper Animate的使用方法
Swiper Animate是Swiper中文网提供的用于在Swiper内快速制作CSS3动画效果的小插件,适用于Swiper2.x和Swiper3.x 。
此插件不适用于loop模式
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------以上是官网给出的方法,下面写一下我自己常用的方法,都是大同小异的。
1.首先准备一个animation Test的Demo,在浏览器中运行会出现类似这样的界面
界面上所有的按钮都是一种动画,点击按钮,屏幕上的黑色实心框就会执行这个动画,你可以按你的要求来选择哪种动画,然后记住它的名字,没错,就是按钮上面的文字,这就是动画的name.
2.因为这些动画是用css样式实现的,所以我们要用webstorm或者其他工具打开这个css文件,如果没有单独使用css文件,那么就在浏览器中右键鼠标来查看源码。
3.接下来Ctrl+F可以在当前打开的css文件中搜索关键词,将你需要的动画名字输入进去,尽量不要输错哦 ,不然会增大工作量,这里我们以第一行,第五个动画为例,这个动画的名字叫做"tada".
搜索的时候建议将动画的名字完整的输入进去,因为动画中有很多相似的名字,关键字可能重复。
4.下面将带有动画名字的代码,即所有带黄色部分的代码段落都拷贝到你自己项目的css文件中。还没结束哦,下面我们再找到这个代码的最上面,有两段代码,就是下图被圈住的代码
这两段代码也要拷贝到你自己的文件下,因为如果没有这些,动画就不会执行。记住吧。
5.接下来要给你需要执行动画的地方(图片或者文字或者其他都好)设置一个class,class="ani"这个是固定的,id可以随便设置,如下我想让一张图片执行这个动画,就要这样写<img class="ani" id="pic" src="1.jpg">.
现在我们只需要在js文件中加一句代码就可以了,$("#pic").addClass("tada");//添加一个样式,这句话不解释了
那么这句代码要放在哪里呢,一般我们都会要求进入一个页面之后执行这个动画,那么代码就放在当进入页面这个函数之中
onTransitionStart:function(swiper){
if(swiper.activeIndex==0){ //当进入第一页是执行动画
$("#pic").addClass("tada");
}
}
6.运行,成功。