From ae9e10d75501baaa7ee703e5032e97a3150955dd Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Mon, 2 Oct 2023 17:09:50 +0800
Subject: [PATCH] fix: prevent content shaking during animation

---
 src/contentScripts/views/App.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 7b2f51e7..3a7d0735 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -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>