GithubBackup/bilibili-video-downloader
1
0
Fork 0
mirror of https://github.com/lanyeeee/bilibili-video-downloader.git synced 2026-09-08 09:06:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 给导航切换添加淡入淡出动画

Browse Source
This commit is contained in:
lanyeeee
2025-08-24 04:40:47 +08:00
parent 697a926398
commit 8ddb61d6ca
1 changed files with 26 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/AppContent.vue
+26 -6
View File
@@ -155,12 +155,22 @@ onMounted(() => {
</template> </template>
</n-tooltip> </n-tooltip>
</div> </div>
<div class="w-full overflow-hidden"> <div class="relative w-full overflow-hidden">
<SearchPane v-show="store.currentNavName === 'search'" ref="searchPaneRef" /> <transition name="fade">
<FavPane v-show="store.currentNavName === 'fav'" /> <SearchPane class="absolute inset-0" v-show="store.currentNavName === 'search'" ref="searchPaneRef" />
<WatchLaterPane v-show="store.currentNavName === 'watch_later'" /> </transition>
<BangumiFollowPane v-show="store.currentNavName === 'bangumi_follow'" /> <transition name="fade">
<DownloadPane v-show="store.currentNavName === 'download'" /> <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>
</div> </div>
@@ -186,4 +196,14 @@ onMounted(() => {
:deep(.n-badge-sup) { :deep(.n-badge-sup) {
@apply pointer-events-none; @apply pointer-events-none;
} }
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.2s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style> </style>