diff --git a/.gitignore b/.gitignore
index 1c3e58b..130339d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
node_modules
.DS_Store
-*.log
\ No newline at end of file
+*.log
+.idea
\ No newline at end of file
diff --git a/README.md b/README.md
index 7c7d0d2..5ec14b2 100644
--- a/README.md
+++ b/README.md
@@ -1,82 +1,94 @@
-#vue-animate
+# vue2-animate for Vue.js 2.0
+
*Cross-browser CSS3 animation library*
-[](https://www.npmjs.com/package/vue-animate)
-[](LICENSE)
+[](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.
+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](http://about.asika.tw/vue2-animate/)
- - **[DEMO](http://luoye.pw/vue-animate-demo/)** (courtesy of [luoye-fe](https://github.com/luoye-fe))
+**This is modified version of: https://github.com/haydenbbickerton/vue-animate for Vue 2.0**
-##Installation
-####HTML
+## Installation
+#### HTML
Include the stylesheet:
```html
-
+
```
-####npm
+#### npm
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 vue-animate
+ npm install --save vue2-animate
```
```js
- require('vue-animate/dist/vue-animate.min.css')
+ require('vue2-animate/dist/vue2-animate.min.css')
```
-####Less
+#### Less
```less
- @import "/src/vue-animate.less";
+ @import "/src/vue2-animate.less";
```
-####Building
+#### Building
```shell
- git clone https://github.com/haydenbbickerton/vue-animate.git
- cd vue-animate
+ 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
```
-##Usage
+## 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
-
hello
- ```
+```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
- 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](http://vuejs.org/guide/transitions.html#Custom-Transition-Classes "Custom Transition Classes"), you can either add *-enter/-leave* to the classes:
+#### Custom Transition Classes
- ```js
- Vue.transition('bounce', {
- enterClass: 'bounceLeft-enter',
- leaveClass: 'bounceRight-leave'
- })
- ```
- Or use the regular *In/Out* syntax:
+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:
- ```js
- Vue.transition('bounce', {
- enterClass: 'bounceInLeft',
- leaveClass: 'bounceOutRight'
- })
- ```
-
-####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 vue-animate (aka - *what you can put in the transition="x"* attribute) as of right now:
-
-#####Bounce
+```html
+
+
hello
+
+```
+ Or use the regular *In/Out* syntax:
+
+```html
+
+