首先安装animate.css类库
cnpm install animate.css –save
然后在vue的script文件中引用
import $ from '../assets/js/jquery.js';//非必要
import animate from 'animate.css'
使用方法如下
-
//使用duration来统一设置入场和离场时候动画
-
//还可以分别设置 :duration="{enter:200,leave:400}"
-
<transition name="fade" enter-active-class="animated bounceIn"
-
leave-active-class="animated bounceIn"
-
:duration="200">
-
<h3 v-if="flag">这是一个h3</h3>
-
</transition>
-
fade: {
-
title: '淡入淡出',
-
fadeIn: '淡入',
-
fadeInDown: '向下淡入',
-
fadeInDownBig: '向下快速淡入',
-
fadeInLeft: '向右淡入',
-
fadeInLeftBig: '向右快速淡入',
-
fadeInRight: '向左淡入',
-
fadeInRightBig: '向左快速淡入',
-
fadeInUp: '向上淡入',
-
fadeInUpBig: '向上快速淡入',
-
fadeOut: '淡出',
-
fadeOutDown: '向下淡出',
-
fadeOutDownBig: '向下快速淡出',
-
fadeOutLeft: '向左淡出',
-
fadeOutLeftBig: '向左快速淡出',
-
adeOutRight: '向右淡出',
-
fadeOutRightBig: '向右快速淡出',
-
fadeOutUp: '向上淡出',
-
fadeOutUpBig: '向上快速淡出'
-
},
-
bounce: {
-
title: '弹跳类',
-
bounceIn: '弹跳进入',
-
bounceInDown: '向下弹跳进入',
-
bounceInLeft: '向右弹跳进入',
-
bounceInRight: '向左弹跳进入',
-
bounceInUp: '向上弹跳进入',
-
bounceOut: '弹跳退出',
-
bounceOutDown: '向下弹跳退出',
-
bounceOutLeft: '向左弹跳退出',
-
bounceOutRight: '向右弹跳退出',
-
bounceOutUp: '向上弹跳退出'
-
},
-
zoom: {
-
title: '缩放类',
-
zoomIn: '放大进入',
-
zoomInDown: '向下放大进入',
-
zoomInLeft: '向右放大进入',
-
zoomInRight: '向左放大进入',
-
zoomInUp: '向上放大进入',
-
zoomOut: '缩小退出',
-
zoomOutDown: '向下缩小退出',
-
zoomOutLeft: '向左缩小退出',
-
zoomOutRight: '向右缩小退出',
-
zoomOutUp: '向上缩小退出'
-
},
-
rotate: {
-
title: '旋转类',
-
rotateIn: '顺时针旋转进入',
-
rotateInDownLeft: '从左往下旋入',
-
rotateInDownRight: '从右往下旋入',
-
rotateInUpLeft: '从左往上旋入',
-
rotateInUpRight: '从右往上旋入',
-
rotateOut: '顺时针旋转退出',
-
rotateOutDownLeft: '向左下旋出',
-
rotateOutDownRight: '向右下旋出',
-
rotateOutUpLeft: '向左上旋出',
-
rotateOutUpRight: '向右上旋出'
-
},
-
flip: {
-
title: '翻转类',
-
flipInX: '水平翻转进入',
-
flipInY: '垂直翻转进入',
-
flipOutX: '水平翻转退出',
-
flipOutY: '垂直翻转退出'
-
},
-
strong: {
-
title: '强调类',
-
bounce: '弹跳',
-
flash: '闪烁',
-
pulse: '脉冲',
-
rubberBand: '橡皮筋',
-
shake: '左右弱晃动',
-
swing: '上下摆动',
-
tada: '缩放摆动',
-
wobble: '左右强晃动',
-
jello: '拉伸抖动'
-
}