diff --git a/src/AppContent.vue b/src/AppContent.vue
index 60a4a34..585e219 100644
--- a/src/AppContent.vue
+++ b/src/AppContent.vue
@@ -155,12 +155,22 @@ onMounted(() => {
           </template>
         </n-tooltip>
       </div>
-      <div class="w-full overflow-hidden">
-        <SearchPane v-show="store.currentNavName === 'search'" ref="searchPaneRef" />
-        <FavPane v-show="store.currentNavName === 'fav'" />
-        <WatchLaterPane v-show="store.currentNavName === 'watch_later'" />
-        <BangumiFollowPane v-show="store.currentNavName === 'bangumi_follow'" />
-        <DownloadPane v-show="store.currentNavName === 'download'" />
+      <div class="relative w-full overflow-hidden">
+        <transition name="fade">
+          <SearchPane class="absolute inset-0" v-show="store.currentNavName === 'search'" ref="searchPaneRef" />
+        </transition>
+        <transition name="fade">
+          <FavPane class="absolute inset-0" v-show="store.currentNavName === 'fav'" />
+        </transition>
+        <transition name="fade">
+          <WatchLaterPane class="absolute inset-0" v-show="store.currentNavName === 'watch_later'" />
+        </transition>
+        <transition name="fade">
+          <BangumiFollowPane class="absolute inset-0" v-show="store.currentNavName === 'bangumi_follow'" />
+        </transition>
+        <transition name="fade">
+          <DownloadPane class="absolute inset-0" v-show="store.currentNavName === 'download'" />
+        </transition>
       </div>
     </div>
 
@@ -186,4 +196,14 @@ onMounted(() => {
 :deep(.n-badge-sup) {
   @apply pointer-events-none;
 }
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
 </style>