renun/BewlyBewly
1
0
Fork 0
mirror of https://github.com/BewlyBewly/BewlyBewly.git synced 2025-04-14 13:15:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: unified list transition animations

Browse Source
This commit is contained in:
Hakadao
2023-08-17 00:58:05 +08:00
parent 9e5930dfd1
commit d5ce66a2ab
7 changed files with 20 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/contentScripts/views/App.vue
View File

@@ -446,4 +446,13 @@ function setAppWallpaperMaskingOpacity() {
.fade-leave-to {
--at-apply: opacity-0;
}
.list-enter-active,
.list-leave-active {
transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
--at-apply: opacity-0 transform translate-y-2 transform-gpu;
}
</style>

8
src/contentScripts/views/History/History.vue
View File

@@ -518,12 +518,4 @@ function jumpToLoginPage() {
</template>
<style lang="scss" scoped>
.list-enter-active,
.list-leave-active {
transition: all 0.3s ease;
}
.list-enter-from,
.list-leave-to {
--at-apply: opacity-0 transform translate-y-2 transform-gpu;
}
</style>

13
src/contentScripts/views/Home/components/RecommendContent.vue
View File

@@ -207,17 +207,4 @@ function jumpToLoginPage() {
</template>
<style lang="scss" scoped>
.list-move,
.list-enter-active,
.list-leave-active {
transition: opacity 0.5s ease;
}
.list-enter-from,
.list-leave-to {
opacity: 0;
}
.list-leave-active {
display: none;
}
</style>

30
src/contentScripts/views/WatchLater/WatchLater.vue
View File

@@ -259,6 +259,17 @@ function jumpToLoginPage() {
pos="sticky top-120px" flex="~ col gap-4" justify-start my-10 w-full h="auto md:[calc(100vh-160px)]" p-6
rounded="$bew-radius" overflow-hidden bg="$bew-fill-3"
>
<div
pos="absolute top-0 left-0" w-full h-full bg-cover bg-center z--1
>
<div absolute w-full h-full style="backdrop-filter: blur(60px) saturate(180%)" bg="$bew-fill-4" />
<img
v-if="watchLaterList[0]"
:src="removeHttpFromUrl(`${watchLaterList[0].pic}@480w_270h_1c`)"
w-full h-full object="cover center"
>
</div>
<picture
rounded="$bew-radius" style="box-shadow: 0 16px 24px -12px rgba(0, 0, 0, .36)"
aspect-video mb-4 bg="$bew-fill-2"
@@ -301,17 +312,6 @@ function jumpToLoginPage() {
{{ t('watch_later.remove_watched_videos') }}
</Button>
</p>
<div
v-if="watchLaterList[0]"
pos="absolute top-0 left-0" w-full h-full bg-cover bg-center z--1
>
<div absolute w-full h-full style="backdrop-filter: blur(60px) saturate(180%)" bg="$bew-fill-4" />
<img
v-if="watchLaterList[0]"
:src="removeHttpFromUrl(`${watchLaterList[0].pic}@480w_270h_1c`)"
w-full h-full object="cover center"
>
</div>
</div>
</aside>
</div>
@@ -323,12 +323,4 @@ function jumpToLoginPage() {
</template>
<style lang="scss" scoped>
.list-enter-active,
.list-leave-active {
transition: all 0.3s ease;
}
.list-enter-from,
.list-leave-to {
--at-apply: opacity-0 transform translate-y-2 transform-gpu;
}
</style>