animate.css在vue脚手架中安装使用方法及API

animate.css官网：https://daneden.github.io/animate.css/

有错误欢迎指正，感谢！

1/ 安装

cnpm install --save animate.css

 

2/ main.js中添加：

import animated from 'animate.css'

Vue.use(animated)

3/ 使用

       

       

 

4/ 给某个元素动态添加动画样式

$('#yourElement').addClass('animated bounceOutLeft');

 

5/ 动画执行完后执行事件

$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

 

6/ 更改默认设置

#yourElement

{

      animate-duration: 2s; //动画持续时间

      animate-delay: 1s; //动画延迟时间

      animate-iteration-count: 2; //动画执行次数

}

7/ 所有动画效果对应中文 

Attention Seekers：{

• bounce: 弹跳
• flash: 闪
• pulse: 脉冲
• rubberBand: 橡皮筋
• shake: 抖动
• swing: 摇摆
• tada: 田田
• wobble: 摇晃
• jello: 果冻
• heartBeat: 心跳

}

 

Bouncing Entrances: {

• bounceIn: 弹跳进入
• bounceInDown: 向下弹跳进入
• bounceInLeft: 向右弹跳进入
• bounceRight: 向左弹跳进入
• bounceInUp: 向上弹跳进入

}

 

Bouncing Exits： {

• bounceOut: 弹跳退出
• bounceOutDown: 向下弹跳退出
• bounceOutLeft: 向左弹跳退出
• bounceOutRight: 向右弹跳退出
• bounceOutUp: 向上弹跳退出

}

 

Fading Entrances: {

• fadeIn: 淡入
• fadeInDown: 向下淡入
• fadeInDownBig: 快速向下淡入
• fadeInLeft: 向右淡入
• fadeInLeftBig: 快速向右淡入
• fadeInRight: 向左淡入
• fadeInRightBig": 快速向左淡入
• fadeInUp: 向上淡入
• fadeInUpBig: 快速向上淡入

}

 

Fading Exits: {

• fadeOut: 淡出
• fadeOutDown: 向下淡出
• fadeOutDownBig 快速向下淡出
• fadeOutLeft 向左淡出
• fadeOutLeftBig 快速向左淡出
• fadeOutRight 向右淡出
• fadeOutRightBig 快速向右淡出
• fadeOutUp 向上淡出
• fadeOutUpBig 快速向上淡出

}

 

Flippers: {

• flip: 翻转进入
• flipInX: 垂直翻转进入
• flipInY: 水平翻转进入
• flipOutX: 垂直翻转退出
• flipOutY: 水平翻转退出

}

 

Lightspeed: {

• lightSpeedIn: 光速进入
• lightSpeedOut: 光速退出

}

 

Rotating Entrances: {

• rotateIn: 旋转进入
• rotateInDownLeft: 从左往下旋入
• rotateInDownRight: 从右往下旋入
• rotateInUpLeft: 从左往上旋入
• rotateInUpRight: 从右往上旋入

}

 

Rotating Exits: {

• rotateOut: 旋转退出
• rotateOutDownLeft: 向左下旋出
• rotateOutDownRight: 向右下旋出
• rotateOutUpLeft: 向左上旋出
• rotateOutUpRight: 向右上旋出

}

 

Sliding Entrances: {

• slideInUp: 上滑淡入
• slideInDown: 下滑淡入
• slideInLeft: 右滑淡入
• slideInRight: 左滑淡入

}

 

Sliding Exits: {

• slideOutUp: 上滑淡出
• slideOutDown: 下滑淡出
• slideOutLeft: 左滑淡出
• slideOutRight: 右滑淡出

}

 

Zoom Entrances: {

• zoomIn: 放大进入
• zoomInDown: 向下放大进入
• zoomInLeft: 向右放大进入
• zoomInRight: 向左放大进入
• zoomInUp: 向上放大进入

}

 

Zoom Exits: {

• zoomOut: 缩小退出
• zoomOutDown: 向下缩小退出
• zoomOutLeft: 向左缩小退出
• zoomOutRight: 向右缩小退出
• zoomOutUp: 向上缩小退出

}

 

Specials: {

• hinge: 铰链退出
• jackInTheBox:  玩偶匣进入
• rollIn: 旋转进入
• rollOut: 旋转退出

}