html修炼养成--关于在swiper中添加动画的方法

之前我们提到了在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.运行，成功。