新增 文件夹列表展开收起动画效果

src/pages/NoteListPage.vue

@@ -14,17 +14,19 @@
           slot="fixed" />
 
         <!-- 悬浮文件夹列表 - 使用绝对定位实现 -->
-        <div v-if="isFolderExpanded" class="folder-list" slot="fixed">
+        <transition name="folder-slide">
-          <FolderManage
+          <div v-if="isFolderExpanded" class="folder-list" slot="fixed">
-            :allCount="allNotesCount"
+            <FolderManage
-            :starredCount="starredNotesCount"
+              :allCount="allNotesCount"
-            :trashCount="trashNotesCount"
+              :starredCount="starredNotesCount"
-            :archiveCount="0"
+              :trashCount="trashNotesCount"
-            :selectedFolder="currentFolder"
+              :archiveCount="0"
-            :onAllClick="handleAllNotesClick"
+              :selectedFolder="currentFolder"
-            :onStarredClick="handleStarredNotesClick"
+              :onAllClick="handleAllNotesClick"
-            :onTrashClick="handleTrashNotesClick" />
+              :onStarredClick="handleStarredNotesClick"
-        </div>
+              :onTrashClick="handleTrashNotesClick" />
+          </div>
+        </transition>
         <!-- 点击外部区域收起文件夹列表的覆盖层 -->
         <div v-if="isFolderExpanded" @click="() => setIsFolderExpanded(false)" class="folder-overlay" slot="fixed"></div>
         <div class="search-container">
@@ -427,4 +429,30 @@ const notes = computed(() => store.notes)
   position: absolute;
   width: calc(100% - 1rem);
 }
+
+/* 文件夹列表动画 */
+.folder-slide-enter-active,
+.folder-slide-leave-active {
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.folder-slide-enter-from {
+  opacity: 0;
+  transform: scale(0.8) translateY(-20px);
+}
+
+.folder-slide-enter-to {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+
+.folder-slide-leave-from {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+
+.folder-slide-leave-to {
+  opacity: 0;
+  transform: scale(0.8) translateY(-20px);
+}
 </style>