vue使用vue-awesome-swiper插件结合animate.css

在前端使用swiper很多人都能想到使用swpier(网址： https://www.swiper.com.cn/)， swiper能兼容很多不同的项目，如vue、react、原声html等。当你使用swipe时会发现每次使用都需要创建一个swiper对象，因此vue的生态系统中封装了vue-awesome-swiper插件，具体使用如下：1、下载vue-awesome-swiper插件n...

scarecrowll

3215人浏览 · 2019-09-20 11:35:58

scarecrowll · 2019-09-20 11:35:58 发布

1、下载vue-awesome-swiper插件

npm install vue-awesome-swiper --save-dev

2、在main.js中引入

3、页面使用

首先是一个<swiper></swiper>标签，在swiper标签里面是定义的多少个<swiper-slide>页，一个滑页是一个是、slide。

看上去是不是比swiper容易多了呢哈哈哈哈哈哈，所有设置的swiper属性都设置在swiperOption属性中，这些属性和swiper官网一样

////////////////////////////////////////下面是一个坑////////////////////////////////////////

加入在页面你想实现一个动态效果，百度一下可以发现比较火的css动态插件是animate.css，网址： https://daneden.github.io/animate.css/

在vue项目中使用这个css插件操作如下

1、下载插件包： npm install animate.css --save

2、在main.js中引入

3、页面引用

运行项目之后你会发现很多想要的一下动画参数并不能设置，例如动画执行时间啦，延迟时间等，并且你在结合了swiper时也会发现只有第一个swiper-slide中的动起气作用了。主要原因是页面一开始时触发了动画执行，其他的slide并没有触发，主要解决如下：

1、下载animate.js包

打开链接： https://www.swiper.com.cn/download/index.html#file8

选择此js进行下载

接下来就是怎么使用

1、把此ls放入vue的项目中，为了规范vue把静态文件存放在static中，在此文件夹下建立js文件夹把js丢进去

2、在main.js中引入

3、啦啦啦啦页面使用来了

接下来就是在opition里面设置属性on属性

下面附带animate.css设置的动画类型

Attention Seekers 注意力寻求者（9个）

样式	简介
bounce	弹跳
flash	闪
pulse	脉冲
rubberBand	橡皮筋
shake	摇
swing	摇摆
tada	波幅
wobble	摇晃
jello	果冻

Bouncing Entrances 弹跳进入（5个）

样式	简介
bounceIn	向里，弹跳
bounceInDown	向里，向下,弹跳
bounceInLeft	向里，向左,弹跳
bounceInRight	向里，向右,弹跳
bounceInUp	向里，向上，弹跳

Bouncing Exits 弹跳出口（5个）

样式	简介
bounceOut	向外，弹跳
bounceOutDown	向外，向下，弹跳
bounceOutLeft	向里，向左，弹跳
bounceOutRight	向外，向右，弹跳
bounceOutUp	向外，各上，弹跳

Fading Entrances 平淡进入（9个）

样式	简介
fadeIn	向里
fadeInDown	向里，向下，变大
fadeInDownBig	向里，向左，弹跳
fadeInLeft	向里，向左
fadeInLeftBig	向里，向左，变大
fadeInRight	向里，向右
fadeInRightBig	向里，向右，变大
fadeInUp	向里，向上
fadeInUpBig	向里，向上，变大

Fading Exits 平淡退场（9个）

fadeOut	向外
fadeOutDown	向外，向下
fadeOutDownBig	向外，向下，变大
fadeOutLeft	向外，向左
fadeOutLeftBig	向外，向左，变大
fadeOutRight	向外，向右
fadeOutRightBig	向外，向右，变大
fadeOutUp	向外，向上
fadeOutUpBig	向外，向上，变大

Flippers 翻动（5个）

样式	简介
flip	翻翻动转
flipInX	向里，上下，翻动
flipInY	向里，左右，翻动
flipOutX	向外，上下，翻动
flipOutY	向外，左右，翻动

Lightspeed 缓缓移动（2个）

样式	简介
lightSpeedIn	缓缓移入
lightSpeedOut	缓缓移出

Rotating Entrances 翻转入口（5个）

样式	简介
rotateIn	向里，翻转
rotateInDownLeft	向里，向下，向左，翻转
rotateInDownRight	向里，向下，向右，翻转
rotateInUpLeft	向里，向上，向左，翻转
rotateInUpRight	向里，向上，向右，翻转

Rotating Exits 翻转退场（5个）

样式	简介
rotateOut	向外，翻转
rotateOutDownLeft	向外，向下，向右，翻转
rotateOutDownRight	向外，向下，向右，翻转
rotateOutUpLeft	向外，向上，向左，翻转
rotateOutUpRight	向外，向上，向右，翻转

Specials （3个）

样式	简介
hinge	合页
rollIn	向里滚动
rollOut	向外滚动

Zoom Entrances 缩放进入（5个）

样式	简介
zoomIn	向里，放大
zoomInDown	向里，向下，放大
zoomInLeft	向里，向左，放大
zoomInRight	向外，向右，放大
zoomInUp	向里，向上，放大

Zoom Exits 缩放退场（5个）

样式	简介
zoomOut	向外，放大
zoomOutDown	向外，向下，放大
zoomOutLeft	向外，向左，放大
zoomOutRight	向外，向右，放大
zoomOutUp	向外，向上，放大