add more classes and update docs

Author: Edmund1645

README.md

@@ -1,6 +1,8 @@
 # vue-transitions-css
 A lightweight CSS library for for adding transitions to Vue components :star:
 
+[Demo](https://vue-transitions-css.netlify.app/) | [Contribution](#contribution)
+
 ## USAGE
 Installation via NPM:
 ```bash

demo/src/App.vue

@@ -3,7 +3,7 @@
     <Nav />
     <div id="body">
       <div id="selector">
-        <select name="animations" id="animations" v-model="selected">
+        <select name="animations" id="animations-list" v-model="selected">
           <option
             v-for="(animation, index) in animations"
             :key="index"
@@ -12,10 +12,11 @@
             {{ animation.name }}
           </option>
         </select>
-        <button @click="animate">toggle</button>
+        <button @click="animate" class="animation-toggle-button">toggle</button>
       </div>
       <div id="preview">
-        <transition :name="selected">
+        <p class="class-name"><strong>Class name:</strong> {{ selected }}</p>
+        <transition :name="selected" mode="out-in">
           <Content v-if="show" />
         </transition>
       </div>
@@ -68,4 +69,23 @@ export default {
   margin: auto;
   padding: 20px;
 }
+#animations-list {
+  width: 200px;
+  display: inline-block;
+  margin-right: 30px;
+  padding: 30px 20px;
+}
+.animation-toggle-button {
+  padding: 5px 10px;
+  border-radius: 4px;
+  color: white;
+  background-color: #44a1df;
+  cursor: pointer;
+}
+#preview {
+  margin-top: 50px;
+}
+.class-name {
+  margin: 20px 0px;
+}
 </style>

demo/src/assets/animations.js

@@ -3,6 +3,14 @@ export default [
     name: 'Fade',
     class: 'fade',
   },
+  {
+    name: 'Fade X',
+    class: 'fade-x',
+  },
+  {
+    name: 'Fade Y',
+    class: 'fade-y',
+  },
   {
     name: 'Shrink',
     class: 'shrink',

dist/index.min.css

@@ -0,0 +1,12 @@
+/* fade horizontally */
+
+.fade-x-enter,
+.fade-x-leave-to {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.fade-x-enter-active,
+.fade-x-leave-to {
+  transition: opacity 0.3s, transform 0.5s;
+}

src/fade-x.css

@@ -0,0 +1,11 @@
+/* fade up */
+.fade-y-enter,
+.fade-y-leave-to {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.fade-y-enter-active,
+.fade-y-leave-active {
+  transition: opacity 0.3s, transform 0.5s;
+}

src/fade-y.css

@@ -1,10 +1,11 @@
 /* shrink animation */
 .shrink-enter,
 .shrink-leave-to {
-  transform: scale(1.2);
+  transform: scale(1.12);
+  opacity: 0;
 }
 
 .shrink-enter-active,
 .shrink-leave-active {
-  transition: transform 0.3s;
+  transition: transform 0.5s, opacity 0.3s;
 }