adding transtion in vue

Author: DhairyaMajmudar

src/components/Extra.vue

@@ -239,13 +239,14 @@
                     height: 100%;
                 "
             ></canvas>
-            <div id="miniMap">
-                <canvas
-                    id="miniMapArea"
-                    style="position: absolute; left: 0; top: 0; z-index: 3"
-                ></canvas>
-            </div>
-
+            <transition>
+                <div id="miniMap" style="height: 253px; width: 255px">
+                    <canvas
+                        id="miniMapArea"
+                        style="position: absolute; left: 0; top: 0; z-index: 3"
+                    ></canvas>
+                </div>
+            </transition>
             <div id="Help"></div>
             <div
                 class="sk-folding-cube loadingIcon"
@@ -320,4 +321,16 @@ import CustomShortcut from './DialogBox/CustomShortcut.vue'
 import InsertSubcircuit from './DialogBox/InsertSubcircuit.vue'
 import OpenOffline from './DialogBox/OpenOffline.vue'
 import ReportIssue from './ReportIssue/ReportIssue.vue'
-</script>
+</script>
+
+<style>
+.v-enter-active,
+.v-leave-active {
+    transition: opacity 0.8s linear;
+    display: none;
+}
+
+.v-leave-to {
+    opacity: 0;
+}
+</style>

src/simulator/src/minimap.js

@@ -166,7 +166,7 @@ export default miniMapArea = {
     },
     clear() {
         if (lightMode) return
-        document.querySelector('#miniMapArea').style.zIndex = '-1';
+        document.getElementById('miniMapArea').style.zIndex = '-1';
         this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
     },
 }
@@ -189,7 +189,4 @@ export function removeMiniMap() {
         )
         return
     }
-    let miniMap = document.getElementById('miniMap');
-    miniMap.style.transition = 'opacity 0.2s';
-    miniMap.style.opacity = '0';
 }