src/App.vue

@@ -127,7 +127,11 @@
       </router-view>
     </div>
     <div id="popup-collection">
-      <PopUp v-for="(popup, i) in $store.state.popups" :key="i" :item="popup" />
+      <PopUp
+        v-for="popup in $store.state.popups"
+        :key="popup.time"
+        :item="popup"
+      />
     </div>
     <Player ref="player" />
     <Users ref="dialogUsers" />

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,
@@ -22,9 +27,12 @@ export default {
     },
   },
   mounted() {
+    setTimeout(() => {
+      this.fadeout = true;
       setTimeout(() => {
         this.$store.dispatch("removePopUp", this.item);
-    }, 5000);
+      }, 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>

src/store/mutations.js

@@ -27,7 +27,8 @@ export default {
     state.serverInfo = info;
   },
   addPopUp(state, item) {
-    state.popups.push(item);
+    item.time = Date.now();
+    state.popups.unshift(item);
   },
   removePopUp(state, item) {
     let index = state.popups.indexOf(item);