💄 增加动画

package.json

@@ -59,6 +59,7 @@
   },
   "dependencies": {
     "adm-zip": "^0.5.14",
+    "animate.css": "^4.1.1",
     "electron-dl": "^3.5.1",
     "tar": "^6.2.0",
     "unzipper": "^0.10.14"

src/layout/compoenets/LeftMenu.vue

@@ -45,14 +45,16 @@ onMounted(() => {
       <img src="/logo/64x64.png" class="logo" alt="Logo"/>
     </div>
     <ul class="menu-container">
+      <!--      enter-active-class="animate__animated animate__bounceIn"-->
+      <!--      leave-active-class="animate__animated animate__fadeOut"-->
       <li
-          class="menu"
+          class="menu animate__animated"
           :class="currentRoute?.name === r.name ? 'menu-selected' : ''"
           v-for="r in routes"
           :key="r.name"
           @click="handleMenuChange(r)"
       >
-        <Icon :icon="r?.meta?.icon as string"/>
+        <Icon class="animate__animated" :icon="r?.meta?.icon as string"/>
       </li>
       <li
           class="menu"

src/main.ts

@@ -2,6 +2,7 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
 import "./styles/index.scss";
+import 'animate.css';
 import ElementPlus from "element-plus";
 
 createApp(App)

src/styles/layout.scss

@@ -67,16 +67,23 @@ $danger-color: #F56C6C;
       font-size: 20px;
       color: #ADADAD;
       margin-bottom: 10px;
+
+
     }
 
+
     .menu-selected {
       background: #EBE6F7;
       color: $primary-color;
     }
 
-    .menu:hover {
+    .menu:hover, .menu:focus, .menu:active, {
       color: $primary-color;
       cursor: pointer;
+
+      & > svg {
+        animation: swing 0.5s;
+      }
     }