* FadeOut for PopUp

* FadeIn for Dialog fix #6

src/components/base-components/Dialog.vue

@@ -299,7 +299,7 @@ export default {
   right: 0;
   bottom: 0;
   z-index: 1000;
-  animation: fadeIn ease 0.15s;
+  animation: fadeIn ease 0.20s;
 }
 .dialog-window {
   box-shadow: 0px 8px 32px var(--shadow);

src/components/base-components/PopUp.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="popup-control flex-column shadow ma8">
+  <div class="popup-control flex-column shadow ma8" :class="{fadeOut: fadeout}">
     <div class="flex-row" :class="item.type">
       <awesome-icon icon="circle-info" size="2x" class="ma" />
       <div class="flex-column pa8-top ma8-bottom ma8-right">
@@ -11,6 +11,11 @@
 </template>
 <script>
 export default {
+  data() {
+    return {
+      fadeout: false,
+    };
+  },
   props: {
     item: {
       type: Object,
@@ -23,8 +28,11 @@ export default {
   },
   mounted() {
     setTimeout(() => {
-      this.$store.dispatch("removePopUp", this.item);
-    }, 5000);
+      this.fadeout = true;
+      setTimeout(() => {
+        this.$store.dispatch("removePopUp", this.item);
+      }, 1000);
+    }, 4000);
   },
 };
 </script>
@@ -53,4 +61,16 @@ export default {
   border-radius: 8px;
   background-color: var(--success);
 }
+.fadeOut {
+  animation: fadeOut ease 1s;
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
 </style>