vue swiper animate如何使用

需要注意的是：
animate的动画在一加载的时候，所有动画都加载完毕，所以翻到后面swiper页面时设置的delay就看不到了。使用“swiper-animate-effect”，每切换一帧都能看到对应的时延，即动画从0时刻开始。

1.先安装：
npm install animate.css --save

2、下载animate.js包
打开链接： https://www.swiper.com.cn/download/index.html#file8，
下载“swiper.animate1.0.3.min.js”，放到“assets/js/swiper.animate1.0.3.min.js”目录下（该文件需修改适应es6，并添加代码行：‘export {swiperAnimateCache,swiperAnimate};’）。

3.上代码：

main.js:
import animated from 'animate.css'
Vue.use(animated)

HTML：
<div class="ani"
        swiper-animate-effect="bounceInDown"
         swiper-animate-duration="1s"
         swiper-animate-delay="0s">
</div>

JS:
import {swiperAnimateCache,swiperAnimate} from "../../assets/js/swiper.animate1.0.3.min.js"
data(){
	return{
		swiperOption: {
            loop: true,
            direction: "vertical",//控制垂直滚动的方向
            on:{
              init:function(){
                swiperAnimateCache(this);
                swiperAnimate(this);
              },
              slideChangeTransitionStart:function(){
              },
              slideChangeTransitionEnd:function(){
              },
              slideChange:function(){
                swiperAnimate(this);
              },
            },
  		}
	} 
}
      

下面附带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 向外，向右，滑动
————————————————
版权声明：本文为CSDN博主「scarecrowll」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41227106/article/details/101052915