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

src/pages/NoteListPage.vue

@@ -14,6 +14,7 @@
           slot="fixed" />
 
         <!-- 悬浮文件夹列表 - 使用绝对定位实现 -->
+        <transition name="folder-slide">
           <div v-if="isFolderExpanded" class="folder-list" slot="fixed">
             <FolderManage
               :allCount="allNotesCount"
@@ -25,6 +26,7 @@
               :onStarredClick="handleStarredNotesClick"
               :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>