GithubBackup/bilibili-video-downloader
1
0
Fork 0
mirror of https://github.com/lanyeeee/bilibili-video-downloader.git synced 2026-05-06 20:02:57 +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

32
src/AppContent.vue
View File

@@ -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>