changes

app/layouts/default.vue

@@ -4,14 +4,16 @@
     lang="vi"
   >
     <slot></slot>
-    <SnackBar
-      v-if="snackbar"
-      v-bind="snackbar"
-      @close="$store.removeSnackbar()"
-    />
+    <Transition>
+      <SnackBar
+        v-if="$store.snackbar"
+        v-bind="$store.snackbar"
+        @close="$store.snackbar = undefined"
+      />
+    </Transition>
     <Modal
-      v-bind="showmodal"
-      @close="showmodal = undefined"
+      v-bind="$store.showmodal"
+      @close="$store.showmodal = undefined"
     />
     <!-- <Modal2
       v-for="modal in modals"
@@ -31,8 +33,6 @@ import { throttle } from "es-toolkit";
 const route = useRoute();
 const { $getdata, $requestLogin, $store } = useNuxtApp();
 const authorized = ref(false);
-const snackbar = ref(undefined);
-const showmodal = ref(undefined);
 
 function getViewport() {
   let viewport;
@@ -90,17 +90,17 @@ onMounted(() => {
   const throttledGetViewport = throttle(getViewport, 400);
   window.addEventListener("resize", throttledGetViewport);
 });
-watch(
-  () => $store.snackbar,
-  (newVal) => {
-    snackbar.value = newVal;
-  },
-  { deep: true },
-);
-watch(
-  () => $store.showmodal,
-  (newVal) => {
-    showmodal.value = newVal;
-  },
-);
 </script>
+
+<style lang="css" scoped>
+.v-enter-active,
+.v-leave-active {
+  transition: all 0.3s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+  top: 0;
+}
+</style>