Toast disappear functionnalities

src/assets/scss/_animations.scss

@@ -27,6 +27,15 @@
   }
 }
 
+@keyframes fadeOut {
+  from {
+    opacity: 100%;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
 @keyframes fromBottom {
   from {
     transform: translateY(20px);
@@ -45,6 +54,15 @@
   }
 }
 
+@keyframes slideFromLeft {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
 @keyframes paneBgAround {
   0% {
     background-position: -10vw 0%;

src/components/celestials/CelestialCard.vue

@@ -98,6 +98,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import { v4 as uuidv4 } from "uuid";
 
 import store from "@/store";
 
@@ -124,7 +125,7 @@ export default defineComponent({
       store.dispatch("toggleFav", celestial.id);
       if (store.getters.isFav(celestial.id)) {
         store.dispatch("toasts/pushToast", {
-          id: 200,
+          id: uuidv4(),
           title: "Favori ajouté",
           message: `${celestial.name} a été ajouté à la liste des favoris.`,
           category: "valid",
@@ -132,7 +133,7 @@ export default defineComponent({
         });
       } else {
         store.dispatch("toasts/pushToast", {
-          id: 200,
+          id: uuidv4(),
           title: "Favori retiré",
           message: `${celestial.name} a été retiré de la liste des favoris.`,
           category: "valid",

src/components/toast/ToastCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="toast-card" :class="toast.category">
+  <div class="toast-card" :class="[toast.category, closing ? 'closing' : '']">
     <div class="toast-title">
       <slot name="title" />
     </div>
@@ -12,8 +12,15 @@
 <script>
 import { defineComponent } from "vue";
 
+import store from "@/store";
+
 export default defineComponent({
   name: "ToastCard",
+  data() {
+    return {
+      closing: false
+    };
+  },
   props: {
     toast: Object
   },
@@ -25,10 +32,17 @@ export default defineComponent({
         setTimeout(() => {
           timeToLive = timeToLive - 1;
           this.countdown(timeToLive);
-        }, 800);
+        }, 900);
       } else {
         // When timer ends
+        this.closing = true;
+        setTimeout(() => {
+          this.close();
+        }, 1200);
       }
+    },
+    close() {
+      store.dispatch("toasts/purgeToast", this.toast.id);
     }
   },
   mounted() {
@@ -76,5 +90,9 @@ export default defineComponent({
   &.danger {
     background-color: $danger;
   }
+  &.closing {
+    animation: fadeOut 1.2s cubic-bezier(0.175, 1, 0.32, 1),
+      slideFromLeft 1.2s cubic-bezier(0.175, 1, 0.32, 1);
+  }
 }
 </style>

src/components/toast/ToastsList.vue

@@ -25,11 +25,6 @@ export default defineComponent({
     queue() {
       return this.$store.state.toasts.queue;
     }
-  },
-  watch: {
-    queue(next, old) {
-      console.log(old, next);
-    }
   }
 });
 </script>

src/shims-vue.d.ts

@@ -4,3 +4,5 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>
   export default component
 }
+
+declare module 'uuid';

src/store/toasts/index.ts

@@ -1,7 +1,7 @@
 export default {
   state: {
     queue: Array<{
-      id: number;
+      id: string;
       title: string;
       message: string;
       category: string;
@@ -11,11 +11,17 @@ export default {
   mutations: {
     pushToast: (state: any, toast: any) => {
       state.queue.push(toast);
+    },
+    purgeToast: (state: any, toastId: string) => {
+      state.queue = state.queue.filter((toast: any) => toast.id != toastId);
     }
   },
   actions: {
     pushToast: ({ commit }: any, toast: any) => {
       commit("pushToast", toast);
+    },
+    purgeToast: ({ commit }: any, toastId: string) => {
+      commit("purgeToast", toastId);
     }
   }
 };