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

fix: prevent content shaking during animation

Browse Source
This commit is contained in:
Hakadao
2023-10-02 17:09:50 +08:00
parent 8b7ce1ff0d
commit ae9e10d755
1 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -507,8 +507,7 @@ function handleAdaptToOtherPageStylesChange() {
<main
v-if="isHomePage"
p="t-70px" m-auto
relative
p="t-80px" m-auto
:w="isVideoPage ? '[calc(100%-160px)]' : 'lg:85% md:[calc(90%-60px)] [calc(100%-140px)]'"
>
<!-- control button group -->
@@ -537,7 +536,7 @@ function handleAdaptToOtherPageStylesChange() {
</div>
<Transition name="fade">
<Component :is="pages[activatedPage]" :key="dynamicComponentKey" :style="{ position: 'absolute', width: '100%' }" />
<Component :is="pages[activatedPage]" :key="dynamicComponentKey" />
</Transition>
</main>
</div>
@@ -632,11 +631,13 @@ function handleAdaptToOtherPageStylesChange() {
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
--at-apply: opacity-0;
}
.fade-leave-to {
--at-apply: hidden
}
.list-enter-active,
.list-leave-active {
@@ -646,4 +647,7 @@ function handleAdaptToOtherPageStylesChange() {
.list-leave-to {
--at-apply: opacity-0 transform translate-y-6 transform-gpu;
}
.list-leave-to {
--at-apply: hidden
}
</style>