From f27c3e1da638f9d8c38c2a4a86132e5c1583523f Mon Sep 17 00:00:00 2001
From: yuantao <user@example.com>
Date: Fri, 17 Oct 2025 13:31:18 +0800
Subject: [PATCH] =?UTF-8?q?"=E6=96=B0=E5=A2=9E=EF=BC=9A=E4=BE=BF=E7=AD=BE?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=88=A0=E9=99=A4=E9=87=8D=E6=8E=92=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB=E6=95=88=E6=9E=9C"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/NoteListPage.vue | 54 +++++++++++++++++++++++++++++---------
 1 file changed, 41 insertions(+), 13 deletions(-)

diff --git a/src/pages/NoteListPage.vue b/src/pages/NoteListPage.vue
index 5604f02..0296cee 100644
--- a/src/pages/NoteListPage.vue
+++ b/src/pages/NoteListPage.vue
@@ -32,19 +32,21 @@
         </div>
 
         <div class="notes-container">
-          <div v-for="note in filteredAndSortedNotes" :key="note.id" class="note-item">
-            <NoteItem
-              :title="note.title"
-              :content="note.content"
-              :date="formatDate(note.updatedAt)"
-              :isStarred="note.isStarred"
-              :isTop="note.isTop || false"
-              :hasImage="note.hasImage || false"
-              :onPress="() => handleNotePress(note.id)"
-              :onStarToggle="() => handleStarToggle(note.id)"
-              :onTopToggle="() => handleTopToggle(note.id)"
-              :onDelete="() => confirmDeleteNote(note.id)" />
-          </div>
+          <transition-group name="note-list" tag="div" class="notes-list">
+            <div v-for="note in filteredAndSortedNotes" :key="note.id" class="note-item">
+              <NoteItem
+                :title="note.title"
+                :content="note.content"
+                :date="formatDate(note.updatedAt)"
+                :isStarred="note.isStarred"
+                :isTop="note.isTop || false"
+                :hasImage="note.hasImage || false"
+                :onPress="() => handleNotePress(note.id)"
+                :onStarToggle="() => handleStarToggle(note.id)"
+                :onTopToggle="() => handleTopToggle(note.id)"
+                :onDelete="() => confirmDeleteNote(note.id)" />
+            </div>
+          </transition-group>
         </div>
       </ion-content>
     </div>
@@ -375,9 +377,35 @@ const notes = computed(() => store.notes)
 
 .notes-container {
   flex: 1;
+  position: relative;
+}
+
+.notes-list {
+  position: relative;
 }
 
 .note-item {
   margin: 0.6rem 0;
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+/* 便签列表动画 */
+.note-list-enter-active,
+.note-list-leave-active {
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.note-list-leave-to {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.note-list-move {
+  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.note-list-leave-active {
+  position: absolute;
+  width: calc(100% - 1rem);
 }
 </style>