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>