Animate backdrop.

Author: Godofbrowser

dist/vuejs-dialog.min.js

@@ -1,7 +1,7 @@
 {
   "name": "vuejs-dialog",
   "version": "0.1.8",
-  "description": "A robost, promise based confirm and alert dialog.",
+  "description": "A lightweight, promise based alert, prompt and confirm dialog",
   "main": "dist/vuejs-dialog.min.js",
   "directories": {
     "example": "example"

package.json

@@ -1,7 +1,7 @@
 <template>
     <div>
-        <transition :name="animation" appear="" @after-leave="anmiationEnded">
-            <div v-if="show" ref="container" class="dg-container">
+        <transition :name="animation" appear="" @after-leave="backdrop = false">
+            <div v-if="window" ref="container" class="dg-container">
                 <div class="dg-content-cont dg-content-cont--floating">
                     <div class="dg-main-content">
                         <!--<div class="dg-header">-->
@@ -30,7 +30,9 @@
             </div>
         </transition>
 
-        <div class="dg-backdrop"></div>
+        <transition name="dg-backdrop" appear="" @after-leave="anmiationEnded">
+            <div v-if="backdrop" class="dg-backdrop"></div>
+        </transition>
     </div>
 </template>
 
@@ -42,7 +44,8 @@
     export default {
         data: function () {
             return {
-                show: true,
+                window: true,
+                backdrop: true,
                 canceled: false,
                 loading: false
             }
@@ -118,7 +121,7 @@
                 this.loading = !!loading
             },
             close(){
-                this.show = false
+                this.window = false
             },
             anmiationEnded(){
                 if (this.canceled){

src/plugin/components/dialog-window.vue

@@ -1,9 +1,8 @@
 <template>
-    <div>
+    <div v-if="dialogs.length > 0">
         <dialog-window v-for="(dialog, idx) in dialogs"
-                   :key="dialog.id"
-                   :options="dialog.options"
-                   @close="closeDialog(idx)">
+                       :options="dialog.options"
+                       @close="closeDialog(idx)">
         </dialog-window>
     </div>
 </template>
@@ -20,7 +19,6 @@
         methods: {
             commit(data){
                 this.dialogs.push({
-                    id: data.id || Date.now(),
                     options: data
                 })
             },

src/plugin/components/dialog.vue

@@ -23,6 +23,14 @@
 	transform: translateX(30px);
 }
 
+.dg-backdrop-enter-active {
+	animation: dg-fadeIn .16s;
+}
+
+.dg-backdrop-leave-active {
+	animation: dg-fadeOut .16s;
+}
+
 .dg-fade-enter-active {
 	animation: dg-fadeIn .6s;
 }