# vue2-animate for Vue.js 2
*Cross-browser CSS3 animation library*
[](https://www.npmjs.com/package/vue2-animate)
[](LICENSE)
A [Vue.js](http://vuejs.org/ "Vue.js") port of [Animate.css](https://github.com/daneden/animate.css "Animate.css"). For use with Vue's built-in transitions. | [DEMO](https://the-allstars.com/vue2-animate/)
## Credit
- [@haydenbbickerton](https://github.com/haydenbbickerton/vue-animate) is the origin [vue-animate (LESS)](https://github.com/haydenbbickerton/vue-animate) author (Only for Vue 1.x).
- [@pavels-hyuna](https://github.com/pavels-hyuna) is SCSS version author.
I'm just project maintainer, any changes or request please open a Pull-Request.
## Table of Content
- [Table of Content](#table-of-content)
- [Installation](#installation)
- [HTML](#html)
- [NPM / Yarn](#npm--yarn)
- [SASS/SCSS](#sassscss)
- [Less](#less)
- [Building](#building)
- [Usage](#usage)
- [Custom Transition Classes](#custom-transition-classes)
- [Custom Animation Duration](#custom-animation-duration)
- [Supported Animations](#supported-animations)
- [Bounce](#bounce)
- [Fade](#fade)
- [Flip](#flip)
- [Rotate](#rotate)
- [Slide](#slide)
- [Zoom](#zoom)
- [LightSpeed](#lightSpeed)
- [License](#license)
- [Contributing](#contributing)
## Installation
### HTML
Include the stylesheet:
```html
```
Include by CDN:
```html
```
### NPM / Yarn
If you're on webpack and using the [css-loader](https://github.com/webpack/css-loader "css loader"), you can use something like this:
```shell
npm install --save vue2-animate
# OR
yarn add vue2-animate
```
```js
require('vue2-animate/dist/vue2-animate.min.css')
```
## SASS/SCSS
```scss
$animationDuration: 0.5s; // specify animation duration. Default value: 1s
@import "/src/sass/vue2-animate.scss";
```
## Less
```less
@import "/src/less/vue2-animate.less";
```
> **NOTE** LESS version is deprecated and no-longer maintained. Use SCSS version for your new project.
## Building
```shell
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](http://vuejs.org/guide/transitions.html "Vue.js Transitions") as you normally would, but for the transition name you will use one of [Animate.css animations](https://github.com/daneden/animate.css#basic-usage "animations") **removing** the ***In/Out*** from the name.
For example, if I want to use *fadeInLeft* and *fadeOutLeft* on my element, I'll write:
```html
{{ item }}
```
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](http://vuejs.org/guide/transitions.html#Custom-Transition-Classes "Custom Transition Classes"), you can either add *-enter/-leave* to the classes:
```html
hello
```
Or use the regular *In/Out* syntax:
```html
hello
```
### Custom Animation Duration
```html
hello
```
### Slide like Mobile
The view element must set position as absolute.
```
```
## Supported Animations
Not all [Animate.css animations](https://github.com/daneden/animate.css#basic-usage "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`
### Flip
* `flip`
* `flipX`
* `flipY`
### Rotate
* `rotate`
* `rotateDownLeft`
* `rotateDownRight`
* `rotateUpLeft`
* `rotateUpRight`
### Slide
* `slideDown`
* `slideLeft`
* `slideRight`
* `slideUp`
### Zoom
* `zoom`
* `zoomDown`
* `zoomLeft`
* `zoomRight`
* `zoomUp`
### LightSpeed
* `lightSpeed`
## License
[MIT](http://opensource.org/licenses/MIT)