improve transitions

Author: f

README.md

@@ -29,7 +29,7 @@ If you are a **try and learn** developer, you can start trying the **vue-wait**
 ```bash
 yarn add vue-wait
 ```
- 
+
 ### 2. Require:
 ```js
 import VueWait from 'vue-wait'
@@ -69,9 +69,9 @@ new Vue({
     async created() {
       // start waiting
       this.$wait.start('my list is to load');
-      
+
       this.myList = await fetch('/my-list-url');
-      
+
       // stop waiting
       this.$wait.end('my list is to load');
     },
@@ -434,7 +434,7 @@ import { mapWaitingActions, mapWaitingGetters } from 'vue-wait'
       createUser: { action: 'createUser', loader: 'creating user'},
       createSuperUser: { action: 'createUser', loader: 'creating super user' },
     }),
-  }, 
+  },
 // ...
 ```
 
@@ -447,7 +447,7 @@ There is also possibility to use array as a second argument to mapWaitingActions
       { method: 'createUser', action: 'createUser', loader: 'creating user'},
       { method: 'createSuperUser', action: 'createUser', loader: 'creating super user' },
     ]),
-  }, 
+  },
 // ...
 
 
@@ -541,6 +541,27 @@ Better example for a `button` with loading state:
 </button>
 ```
 
+## 🔁 Transitions
+
+You can use transitions with `v-wait` component.
+
+Just pass `<transition>` props and listeners to the `v-wait` with `transition` prop.
+
+```vue
+<v-wait for="users"
+  transition="fade"
+  mode="out-in"
+  :duration="1000"
+  enter-active-class="enter-active"
+  @leave='someAwesomeFinish()'
+  >
+  <template slot="waiting">
+    <p>Loading...</p>
+  </template>
+  My content
+</v-wait>
+```
+
 ## ⚡️ Making Reusable Loader Components
 
 With reusable loader components, you will be able to use custom loader components as example below. This will allow you to create better **user loading experience**.

src/components/v-wait.vue

@@ -1,5 +1,23 @@
 <template lang="html">
-  <transition :name='transition' :mode='mode'>
+  <transition
+    :name='transition'
+    :mode='mode'
+    :duration='duration'
+    :enter-class='transitionClass(enterClass)'
+    :enter-active-class='transitionClass(enterActiveClass)'
+    :enter-to-class='transitionClass(enterToClass)'
+    :leave-class='transitionClass(leaveClass)'
+    :leave-active-class='transitionClass(leaveActiveClass)'
+    :leave-to-class='transitionClass(leaveToClass)'
+    @beforeEnter='$emit("beforeEnter")'
+    @enter='$emit("enter")'
+    @afterAnter='$emit("afterEnter")'
+    @enterCancelled='$emit("enterCancelled")'
+    @beforeLeave='$emit("beforeLeave")'
+    @leave='$emit("leave")'
+    @afterLeave='$emit("afterLeave")'
+    @leaveCancelled='$emit("leaveCancelled")'
+    >
     <span v-if='waitsFor'>
       <slot name='waiting'></slot>
       <span v-if='message'>{{ message }}</span>
@@ -8,24 +26,57 @@
   </transition>
 </template>
 <script>
-  export default {
-    props: {
-      visible: Boolean,
-      transition: String,
-      mode: String,
-      for: String,
-      message: String,
+export default {
+  props: {
+    visible: Boolean,
+    for: String,
+    message: String,
+    transition: String,
+    duration: Number,
+    mode: {
+      type: String,
+      default: 'out-in'
     },
-    computed: {
-      waitsFor() {
-        if (this.visible) {
-          return this.visible;
-        }
-        if (this.for) {
-          return this.__$waitInstance.is(this.for);
-        }
-        return this.__$waitInstance.any;
+    enterClass: {
+      type: String,
+      default: 'enter'
+    },
+    enterActiveClass: {
+      type: String,
+      default: 'enter-active'
+    },
+    enterToClass: {
+      type: String,
+      default: 'enter-to'
+    },
+    leaveClass: {
+      type: String,
+      default: 'leave'
+    },
+    leaveActiveClass: {
+      type: String,
+      default: 'leave-active'
+    },
+    leaveToClass: {
+      type: String,
+      default: 'leave-to'
+    },
+  },
+  methods: {
+    transitionClass(className) {
+      return `${this.transition}-${className}`;
+    }
+  },
+  computed: {
+    waitsFor() {
+      if (this.visible) {
+        return this.visible;
+      }
+      if (this.for) {
+        return this.__$waitInstance.is(this.for);
       }
+      return this.__$waitInstance.any;
     }
   }
+};
 </script>