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...
在前端使用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中引入
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 | 向外,向上,放大 |
Sliding Entrances 滑动进入 (4个)
样式 | 简介 |
---|---|
slideInUp | 向里,向上,滑动 |
slideInDown | 向里,向下,滑动 |
slideInLeft | 向里,向左,滑动 |
slideInRight | 向里,向右,滑动 |
Sliding Exits 滑动退场 (4个)\
样式 | 简介 |
---|---|
slideOutUp | 向外,向上,滑动 |
slideOutDown | 向外,向下,滑动 |
slideOutLeft | 向外,向上,滑动 |
slideOutRight | 向外,向右,滑动 |
更多推荐
所有评论(0)