Merge pull request #594 from immortal521/feat/user-menu-animation

feat: add transition effects for page and dropdown

frontend_nuxt/app.vue

@@ -75,6 +75,17 @@ const goToNewPost = () => {
 
 <style src="~/assets/global.css"></style>
 <style>
+/* 页面过渡效果 */
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.4s;
+}
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+  filter: blur(10px);
+}
+
 .header-container {
   position: fixed;
   top: 0;

frontend_nuxt/components/DropdownMenu.vue

@@ -3,17 +3,19 @@
     <div class="dropdown-trigger" @click="toggle">
       <slot name="trigger"></slot>
     </div>
-    <div v-if="visible" class="dropdown-menu-container">
-      <div
-        v-for="(item, idx) in items"
-        :key="idx"
-        class="dropdown-item"
-        :style="{ color: item.color || 'inherit' }"
-        @click="handle(item)"
-      >
-        {{ item.text }}
+    <Transition name="dropdown-menu">
+      <div v-if="visible" class="dropdown-menu-container">
+        <div
+          v-for="(item, idx) in items"
+          :key="idx"
+          class="dropdown-item"
+          :style="{ color: item.color || 'inherit' }"
+          @click="handle(item)"
+        >
+          {{ item.text }}
+        </div>
       </div>
-    </div>
+    </Transition>
   </div>
 </template>
 
@@ -68,6 +70,16 @@ export default {
   align-items: center;
 }
 
+.dropdown-menu-enter-active,
+.dropdown-menu-leave-active {
+  transition: all 0.4s;
+}
+.dropdown-menu-enter-from,
+.dropdown-menu-leave-to {
+  opacity: 0;
+  transform: translateY(-16px);
+}
+
 .dropdown-menu-container {
   position: absolute;
   top: 100%;

frontend_nuxt/nuxt.config.ts

@@ -15,6 +15,7 @@ export default defineNuxtConfig({
   // 确保 Vditor 样式在 global.css 覆盖前加载
   css: ['vditor/dist/index.css', '~/assets/fonts.css', '~/assets/global.css'],
   app: {
+    pageTransition: { name: 'page', mode: 'out-in' },
     head: {
       script: [
         {