vue-animate
Advanced tools
LESS cross-browser animation library, for use with Vue.js. Ported from Animate.css.
#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')
####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
bouncebounceDownbounceLeftbounceRightbounceUp#####Fade
fadefadeDownfadeDownBigfadeLeftfadeLeftBigfadeRightfadeRightBigfadeUpfadeUpBig#####Rotate
rotaterotateDownLeftrotateDownRightrotateUpLeftrotateUpRight#####Slide
slideDownslideLeftslideRightslideUp#####Zoom
zoomzoomDownzoomLeftzoomRightzoomUpPull requests are welcome :)
FAQs
LESS cross-browser animation library, for use with Vue.js. Ported from Animate.css.
The npm package vue-animate receives a total of 184 weekly downloads. As such, vue-animate popularity was classified as not popular.
We found that vue-animate demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A critical vm2 sandbox escape can allow untrusted JavaScript to break isolation and execute commands on the host Node.js process.
Research
Five malicious NuGet packages impersonate Chinese .NET libraries to deploy a stealer targeting browser credentials, crypto wallets, SSH keys, and local files.
Security News
pnpm 11 turns on a 1-day Minimum Release Age and blocks exotic subdeps by default, adding safeguards against fast-moving supply chain attacks.