Vue中使用swiper animate的爬坑（附赠修改后的js）

修改后的js文件地址：https://download.csdn.net/download/virinko/12088882

业务需求：做个整屏滚动的活动页，每屏都是带动画的

我一开始有两个方案，一个是用vue-fullpage，一个是用swiper

两个方案分别有坑，这里先写swiper的

整个页面是用Swiper的整屏滚动，加上swiper animate来做的

swiper animate的动画是这样子写的，为什么我要用swiper animate呢，因我发现自己手写的animation动画，opacity的变化总是会会有第一帧闪一下的bug（暂时未找到解决原因，如果有知道的朋友也可以告诉我）

写完活动页后在本地运行没有任何问题，但是在编译打包的时候，问题就出来了

--------------------------------------------------------------------------------------------------------------------------

首先使用swiper-animate需要引入两个文件：animate.min.css、swiper.animate.min.js

这两个文件可以在官网去下载，网上也是有的，就不必给链接了

最开始我在本地运行的时候是在html中将这两个文件以标签的形式引入，等到本地开发完毕后准备编译扔到服务器的时候发现

哦吼，没有用哦，报错哦，undefined哦

然后css的文件在mian.js中以import方式引入

那么JS文件呢，这样引入是没有用的

且官网的js文件无论怎么引总是报错，后来我查了下是swiper.animate.min.js因为不支持 AMD/CMD/UMD 用法，需要手动修改

传送门：https://segmentfault.com/q/1010000009216803

在这个传送门中有位答主的答案，并附赠了他修改后js文件

下载后，我在需要用到动画的地方，引入js中的三个方法即可

但是滑动到第二屏的时候动画不动了，报错了，这个js中有个value死活找不到

就去看了下这位答主修改的源码，于是我在其中又加了一层判断，如下

我修改后的下载资源链接在文章上方（不需要积分！免费的！）

然后我在写这篇文章的时候，才发现，原来还有大佬写了执行两种动画的升级版哦

附上大佬链接：http://bbs.swiper.com.cn/forum.php?mod=viewthread&tid=328&extra=page%3D1