Animate for use with Vue's built-in transitions
vue2-animate for Vue.js 2.0 Cross-browser CSS3 animation library A Vue.js port of Animate.css. For use with Vue's built-in transitions. GitHub
vue2-animate for Vue.js 2
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
Thanks @pavels-hyuna for his SCSS version work.
Table of Content
- Table of Content
- Installation
- SASS/SCSS
- Less
- Building
- Usage
- Supported Animations
- License
- Contributing
Installation
HTML
Include the stylesheet:
<head>
<link rel="stylesheet" href="vue2-animate.min.css">
</head>
Include by CDN:
<link rel="stylesheet" href="https://unpkg.com/vue2-animate/dist/vue2-animate.min.css"/>
NPM / Yarn
If you're on webpack and using the css-loader, you can use something like this:
npm install --save vue2-animate
# OR
yarn add vue2-animate
require('vue2-animate/dist/vue2-animate.min.css')
SASS/SCSS
$animationDuration: 0.5s; // specify animation duration. Default value: 1s
@import "<PATH_TO_SOURCE>/src/sass/vue2-animate.scss";
Less
@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.
Building
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
.
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:
<transition-group name="fadeLeft" tag="ul">
<li v-for="item in items" :key="item.id">
{{ item }}
</li>
</transition-group>
enter/leave is already written in the stylesheet, so just remove In/Out from the name and you're golden.
Custom Transition Classes
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>
Custom Animation Duration
<transition name="fade">
<p v-if="show" style="animation-duration: 0.3s">hello</p>
</transition>
Supported Animations
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:
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
License
Contributing
Pull requests are welcome :)
Github Repository
Tags: #VueJs #Animation