add fade transition to modals

DreamlandOwO · Jan 27, 2024 · 3eb1300 · 3eb1300
1 parent 370fb6c
commit 3eb1300
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/src/assets/css/index.css b/src/assets/css/index.css
@@ -89,6 +89,19 @@
     .vf-scrollbar::-webkit-scrollbar-corner {
         @apply bg-transparent;
     }
+
+
+    /* modal fade effect */
+    .vuefinder .fade-enter-active,
+    .vuefinder .fade-leave-active {
+        transition: opacity 0.2s ease;
+    }
+
+    .vuefinder .fade-enter-from,
+    .vuefinder .fade-leave-to {
+        opacity: 0;
+    }
+
 }
 
 @tailwind utilities;

diff --git a/src/components/VueFinder.vue b/src/components/VueFinder.vue
@@ -12,8 +12,12 @@
         <v-f-statusbar :data="fetchData"/>
       </div>
 
-      <component v-if="modal.active" :is="'v-f-modal-'+ modal.type" :selection="modal.data" :current="fetchData"/>
+      <Transition name="fade">
+       <component v-if="modal.active" :is="'v-f-modal-'+ modal.type" :selection="modal.data" :current="fetchData"/>
+      </Transition>
+
       <v-f-context-menu :current="fetchData"/>
+
       <iframe id="download_frame" style="display:none;"></iframe>
     </div>
   </div>

diff --git a/src/components/previews/Video.vue b/src/components/previews/Video.vue
@@ -28,9 +28,5 @@ onMounted(() => {
   emit('load');
 });
 
-const test = (event) => {
-  console.log(event);
-};
-
 </script>