#vue-animate Cross-browser CSS3 animation library
A Vue.js port of Animate.css. For use with Vue's built-in transitions.
##Installation ####HTML Include the stylesheet:
<head>
<link rel="stylesheet" href="vue-animate.min.css">
</head>
####npm If you're on webpack and using the css-loader, you can use something like this:
npm install --save vue-animate
require('vue-animate/dist/vue-animate.min.css')
####bower
bower install --save vue-animate
####Less
@import "<PATH_TO_SOURCE>/src/vue-animate.less";
####Building
git clone https://github.com/haydenbbickerton/vue-animate.git
cd vue-animate
npm install
npm run build #Compiled .css files go to the dist folder
##Usage
Use Vue.js transitions as you normally would, but for the transition name you will use one of Animate.css animations removing the In/Out from the name.
For example, if I want to use fadeInLeft and fadeOutLeft on my element, I'll write:
<div v-if="show" transition="fadeLeft">hello</div>
enter/leave is already written in the stylesheet, so just remove In/Out from the name and you're golden.
####Custom Transition Classes As of 0.0.3, Animate.css's original classnames are supported on enter/leave transitions. So if you're going to use Custom Transition Classes, you can either add -enter/-leave to the classes:
Vue.transition('bounce', {
enterClass: 'bounceLeft-enter',
leaveClass: 'bounceRight-leave'
})
Or use the regular In/Out syntax:
Vue.transition('bounce', {
enterClass: 'bounceInLeft',
leaveClass: 'bounceOutRight'
})
####Supported Animations Not all Animate.css animations are supported at the moment. Here is a list of what's in vue-animate (aka - what you can put in the transition="x" attribute) as of right now:
#####Bounce
bounce
bounceDown
bounceLeft
bounceRight
bounceUp
#####Fade
fade
fadeDown
fadeDownBig
fadeLeft
fadeLeftBig
fadeRight
fadeRightBig
fadeUp
fadeUpBig
#####Rotate
rotate
rotateDownLeft
rotateDownRight
rotateUpLeft
rotateUpRight
#####Slide
slideDown
slideLeft
slideRight
slideUp
#####Zoom
zoom
zoomDown
zoomLeft
zoomRight
zoomUp
Pull requests are welcome :)