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插件

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

2、在main.js中引入

vue使用vue-awesome-swiper插件结合animate.css_第1张图片

3、页面使用

vue使用vue-awesome-swiper插件结合animate.css_第2张图片

首先是一个标签,在swiper标签里面是定义的多少个页,一个滑页是一个是、slide。

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

vue使用vue-awesome-swiper插件结合animate.css_第3张图片

 

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

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

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

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

2、在main.js中引入

3、页面引用

vue使用vue-awesome-swiper插件结合animate.css_第4张图片

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

1、下载animate.js包

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

vue使用vue-awesome-swiper插件结合animate.css_第5张图片

选择此js进行下载

接下来就是怎么使用

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

2、在main.js中引入

vue使用vue-awesome-swiper插件结合animate.css_第6张图片

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

vue使用vue-awesome-swiper插件结合animate.css_第7张图片

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

vue使用vue-awesome-swiper插件结合animate.css_第8张图片

下面附带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 向外,向上,放大

Sliding Entrances 滑动进入 (4个)

样式 简介
slideInUp 向里,向上,滑动
slideInDown 向里,向下,滑动
slideInLeft 向里,向左,滑动
slideInRight 向里,向右,滑动

Sliding Exits 滑动退场 (4个)\

样式 简介
slideOutUp 向外,向上,滑动
slideOutDown 向外,向下,滑动
slideOutLeft 向外,向上,滑动
slideOutRight 向外,向右,滑动

 

 

你可能感兴趣的:(vue使用vue-awesome-swiper插件结合animate.css)