haydenbbickerton · rvanzon · Oct 8, 2016 · Oct 8, 2016 · Oct 8, 2016 · Oct 8, 2016
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 .DS_Store
-*.log
+*.log
+.idea
diff --git a/README.md b/README.md
@@ -1,82 +1,94 @@
-#vue-animate
+# vue2-animate for Vue.js 2.0
+
 *Cross-browser CSS3 animation library*
 
-[![Version](https://img.shields.io/npm/v/vue-animate.svg?style=flat-square)](https://www.npmjs.com/package/vue-animate)
-[![License](https://img.shields.io/npm/l/vue-animate.svg?style=flat-square)](LICENSE)
+[![Version](https://img.shields.io/npm/v/vue2-animate.svg?style=flat-square)](https://www.npmjs.com/package/vue2-animate)
+[![License](https://img.shields.io/npm/l/vue2-animate.svg?style=flat-square)](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
   <head>
-    <link rel="stylesheet" href="vue-animate.min.css">
+    <link rel="stylesheet" href="vue2-animate.min.css">
   </head>
   ```
-####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 "<PATH_TO_SOURCE>/src/vue-animate.less";
+  @import "<PATH_TO_SOURCE>/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
-  <div v-if="show" transition="fadeLeft">hello</div>
-  ```
+```html
+<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.
 
-####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
+<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:
+
+```html
+<transition
+  name="bounce"
+  enter-active-class="bounceInLeft"
+  leave-active-class="bounceOutRight"
+>
+  <p v-if="show">hello</p>
+</transition>
+```
+
+#### 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
   * `fade`
   * `fadeDown`
   * `fadeDownBig`
@@ -87,20 +99,20 @@ Include the stylesheet:
   * `fadeUp`
   * `fadeUpBig`
 
-#####Rotate
+##### Rotate
   * `rotate`
   * `rotateDownLeft`
   * `rotateDownRight`
   * `rotateUpLeft`
   * `rotateUpRight`
 
-#####Slide
+##### Slide
   * `slideDown`
   * `slideLeft`
   * `slideRight`
   * `slideUp`
 
-#####Zoom
+##### Zoom
   * `zoom`
   * `zoomDown`
   * `zoomLeft`

diff --git a/bower.json b/bower.json
@@ -0,0 +1,27 @@
+{
+  "name": "vue2-animate",
+  "description": "LESS cross-browser animation library, for use with Vue.js 2.0. Ported from Animate.css.",
+  "main": "",
+  "authors": [
+    "Simon Asika"
+  ],
+  "license": "MIT",
+  "keywords": [
+    "less",
+    "animate",
+    "animate.css",
+    "vue",
+    "vue.js",
+    "transition",
+    "vue-animate",
+    "css"
+  ],
+  "homepage": "https://github.com/asika32764/vue2-animate",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}