From d5ce66a2ab6f8abcf00b4b55370ea6e70e9a4b1c Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Thu, 17 Aug 2023 00:58:05 +0800
Subject: [PATCH] refactor: unified list transition animations

---
 src/components/Topbar/TopbarFavoritesPop.vue  |  9 ------
 src/components/Topbar/TopbarHistoryPop.vue    |  9 ------
 src/components/Topbar/TopbarMomentsPop.vue    |  9 ------
 src/contentScripts/views/App.vue              |  9 ++++++
 src/contentScripts/views/History/History.vue  |  8 -----
 .../Home/components/RecommendContent.vue      | 13 --------
 .../views/WatchLater/WatchLater.vue           | 30 +++++++------------
 7 files changed, 20 insertions(+), 67 deletions(-)

diff --git a/src/components/Topbar/TopbarFavoritesPop.vue b/src/components/Topbar/TopbarFavoritesPop.vue
index 05eb92cc..f04e5390 100644
--- a/src/components/Topbar/TopbarFavoritesPop.vue
+++ b/src/components/Topbar/TopbarFavoritesPop.vue
@@ -305,15 +305,6 @@ function scrollToTop(element: HTMLElement, duration: number) {
 </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;
-}
-
 .activated-category {
   --at-apply: bg-$bew-theme-color text-white;
 }
diff --git a/src/components/Topbar/TopbarHistoryPop.vue b/src/components/Topbar/TopbarHistoryPop.vue
index 1c8e1d83..0b57d827 100644
--- a/src/components/Topbar/TopbarHistoryPop.vue
+++ b/src/components/Topbar/TopbarHistoryPop.vue
@@ -408,15 +408,6 @@ function scrollToTop(element: HTMLElement, duration: number) {
 </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;
-}
-
 .tab {
   --at-apply: relative text-$bew-text-2;
 
diff --git a/src/components/Topbar/TopbarMomentsPop.vue b/src/components/Topbar/TopbarMomentsPop.vue
index 9b7084e5..9825e6c2 100644
--- a/src/components/Topbar/TopbarMomentsPop.vue
+++ b/src/components/Topbar/TopbarMomentsPop.vue
@@ -433,15 +433,6 @@ function scrollToTop(element: HTMLElement, duration: number) {
 </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;
-}
-
 .tab {
   --at-apply: relative text-$bew-text-2;
 
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 2de721a2..5f42e0d4 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -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>
diff --git a/src/contentScripts/views/History/History.vue b/src/contentScripts/views/History/History.vue
index 1dc0e1cf..2f6aaeb8 100644
--- a/src/contentScripts/views/History/History.vue
+++ b/src/contentScripts/views/History/History.vue
@@ -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>
diff --git a/src/contentScripts/views/Home/components/RecommendContent.vue b/src/contentScripts/views/Home/components/RecommendContent.vue
index d92b2d76..42c8667b 100644
--- a/src/contentScripts/views/Home/components/RecommendContent.vue
+++ b/src/contentScripts/views/Home/components/RecommendContent.vue
@@ -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>
diff --git a/src/contentScripts/views/WatchLater/WatchLater.vue b/src/contentScripts/views/WatchLater/WatchLater.vue
index 68e40b03..33867470 100644
--- a/src/contentScripts/views/WatchLater/WatchLater.vue
+++ b/src/contentScripts/views/WatchLater/WatchLater.vue
@@ -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>