Cross-browser CSS3 animation library
A Vue.js port of Animate.css. For use with Vue's built-in transitions. | DEMO
This is modified version of: https://github.com/haydenbbickerton/vue-animate for Vue 2.0
Thanks @pavels-hyuna for his SCSS version work.
Include the stylesheet:
<head>
<link rel="stylesheet" href="vue2-animate.min.css">
</head>If you're on webpack and using the css-loader, you can use something like this:
npm install --save vue2-animaterequire('vue2-animate/dist/vue2-animate.min.css')$animationDuration: 0.5s; // specify animation duration. Default value: 1s
@import "<PATH_TO_SOURCE>/src/sass/vue2-animate.scss";@import "<PATH_TO_SOURCE>/src/less/vue2-animate.less";NOTE LESS version is deprecated and no-longer maintained. Use SCSS version for your new project.
git clone https://github.com/asika32764/vue2-animate.git
cd vue2-animate
npm install
npm run build #Compiled .css files go to the dist folder.You are able to build LESS version with command npm run build:less.
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:
<transition-group name="fadeLeft" tag="ul">
<li v-for="item in items" v-bind:key="item">
{{ item }}
</li>
</transition-group>enter/leave is already written in the stylesheet, so just remove In/Out from the name and you're golden.
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:
<transition
name="custom-classes-transition"
enter-active-class="bounceLeft-enter"
leave-active-class="bounceRight-leave"
>
<p v-if="show">hello</p>
</transition>Or use the regular In/Out syntax:
<transition
name="bounce"
enter-active-class="bounceInLeft"
leave-active-class="bounceOutRight"
>
<p v-if="show">hello</p>
</transition>Not all Animate.css animations are supported at the moment. Here is a list of what's in vue2-animate (aka - what you can put in the transition="x" attribute) as of right now:
bouncebounceDownbounceLeftbounceRightbounceUp
fadefadeDownfadeDownBigfadeLeftfadeLeftBigfadeRightfadeRightBigfadeUpfadeUpBig
rotaterotateDownLeftrotateDownRightrotateUpLeftrotateUpRight
slideDownslideLeftslideRightslideUp
zoomzoomDownzoomLeftzoomRightzoomUp
Pull requests are welcome :)