在vue中使用animate.css
animate.css是一款前端動畫庫,相似的有velocity-animate
animate.css連結:https://daneden.github.io/animate.css/
gethub連結:https://github.com/daneden/animate.css/blob/master/README.md
用法:
首先
npm install animate.css --save
然後在vue檔案的script中引入:
import $ from '../assets/js/jquery.js';//非必要
import animate from 'animate.css'
最後綁定元素使用:
<template>
<div class="song">
<p id="f" @click='fade'>hello</p>
</div>
</template>
methods:{
fade:function(){
$('#f').addClass('animated bounceOutLeft')
}
}
部分api:
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: '拉伸抖動'
}