feat: BaseSearchMenu transition effect

package.json

@@ -19,6 +19,7 @@
     "@vueuse/core": "^9.13.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
+    "animate.css": "^4.1.1",
     "axios": "^1.5.0",
     "colord": "^2.9.3",
     "dayjs": "^1.11.9",
@@ -94,7 +95,7 @@
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.19.3/xlsx-0.19.3.tgz"
   },
   "lint-staged": {
-    "*": "pnpm run lint:fix"
+    "src/*": "pnpm run lint:fix"
   },
   "config": {
     "commitizen": {

src/layout/components/layout/BaseSearchMenu.vue

@@ -76,13 +76,17 @@ const inputKeyword = useDebounce(() => {
       </template>
     </NInput>
 
-    <Transition name="fade-scale">
+    <Transition
+      :duration="{ enter: 500, leave: 300 } "
+      enter-active-class="animate__animated animate__lightSpeedInRight"
+      leave-active-class="animate__animated animate__lightSpeedOutRight"
+    >
       <div
         v-show="isShowSearchMenu && searchMenuList.length"
         class="
           absolute w-64 z-50 p-2 top-[6%] rounded space-y-1
           border border-vBorderLight dark:border-vBorderDark bg-vPageBgColor dark:bg-vPageBgDarkColor
-      "
+        "
       >
         <template
           v-for="item in searchMenuList"

src/styles/index.css

@@ -6,3 +6,4 @@
 @import 'driver.js/dist/driver.min.css';
 @import 'vue3-photo-preview/dist/index.css';
 @import 'driver.js/dist/driver.min.css';
+@import 'animate.css';