Minor cleanups in App.vue

Add docs about group transition in readme
Add contribution tips in readme

README.md

@@ -108,6 +108,80 @@ props: {
 }
 ```
 
+## Group transitions
+Each transition can be used as a `transition-group` by adding the `group` prop to one of the desired transitions.
+```html
+<fade-transition group>
+   <!--keyed children here-->
+</fade-transition>
+```
+Gotchas/things to watch:
+1. Elements inside `group` transitions should have `display: inline-block` or must be placed in a flex context:
+[Vue.js docs reference](https://vuejs.org/v2/guide/transitions.html#List-Move-Transitions)
+2. Each transition has a `move` class [move class docs](https://vuejs.org/v2/guide/transitions.html#List-Move-Transitions).
+Unfortunately the duration for the move transition cannot be configured through props. By default each transition has a `move` class associated 
+with `.3s` transition duration:
+
+ - Zoom 
+   ```css
+    .zoom-move{
+      transition: transform .3s ease-out;
+    }
+   ```
+ - Slide 
+   ```css
+     .slide-move{
+       transition: transform .3s ease-out;
+     }
+   ```
+ - Scale
+   ```css
+    .scale-move{
+        transition: transform .3s cubic-bezier(.25,.8,.50,1);
+      }
+   ``` 
+ - Fade
+   ```css
+   .fade-move{
+       transition: transform .3s ease-out;
+     }
+    ``` 
+If you want to configure the duration, just redefine the class for the transition you use with the desired duration.
+
+
+## Contribution
+
+### Defining a new transition
+The codebase is fairly simple and contains mostly `.vue` components. If you want to add a new transition to the collection follow these steps:
+1. Fork the repo.
+2. Create a new branch.
+3. Create a new `.vue` file (together with a folder if necessary)
+4. Define the transition.
+   ```html
+    <template>
+      <component :is="componentType"
+                  v-bind="$attrs"
+                  v-on="hooks"
+                  enter-active-class="enterAnimationClassHere"
+                  move-class="move-class"
+                  leave-active-class="leaveAnimationClassHere">
+        <slot></slot>
+      </component>
+    </template>
+    <script>
+      import {baseTransition} from '../mixins/index.js'
+      export default {
+        name: 'transition-name-here',
+        mixins: [baseTransition]
+      }
+    </script>
+    <style>
+     // Your styles for animations here.
+    </style>
+   ```
+5. Import the transition in `src/index.js` and place it in the `export default` object.
+6. Add the name of the new transition (camelCase) in the `transitionOptions` array inside `example/App.vue`
+
 Besides the properties described above, you can pass in any other [Transition props or events](https://vuejs.org/v2/api/#transition)
 **Note** Overriding hooks (especially `beforeEnter` or `beforeLeave`) may cause unwanted effects.
 

example/App.vue

@@ -123,14 +123,11 @@
             options: ['SlideYUpTransition', 'SlideYDownTransition', 'SlideXLeftTransition', 'SlideXRightTransition']
           }
         ],
-        transitions: ['FadeTransition', 'ZoomCenterTransition', 'ZoomXTransition', 'ZoomYTransition', 'CollapseTransition'],
-        transitionGroups: ['fade-transition-group'],
         selected: null,
         show: true,
         isGroup: false,
         duration: 300,
-        transitionName: 'FadeTransition',
-        transitionGroupName: 'fade-transition-group'
+        transitionName: 'FadeTransition'
       }
     },
     computed: {