From b1fd52cc6e93cff0b9b918a371fea3984401a6fb Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Wed, 11 Oct 2023 17:33:59 +0800
Subject: [PATCH] refactor: separate vue transition & transition group styles
 into `transitionAndTransitionGroup.scss`

---
 src/contentScripts/views/App.vue             | 35 -------------------
 src/styles/index.ts                          |  1 +
 src/styles/transitionAndTransitionGroup.scss | 36 ++++++++++++++++++++
 3 files changed, 37 insertions(+), 35 deletions(-)
 create mode 100644 src/styles/transitionAndTransitionGroup.scss

diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 0bd4c0f0..ddf3c7b0 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -327,38 +327,3 @@ function handleOsScroll() {
   --at-apply: opacity-0 transform -translate-y-full;
 }
 </style>
-
-<style lang="scss">
-.page-fade-enter-active,
-.page-fade-leave-active {
-  transition: opacity 0.5s ease;
-}
-.page-fade-enter-from,
-.page-fade-leave-to {
-  --at-apply: opacity-0;
-}
-.page-fade-leave-to {
-  --at-apply: hidden
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.5s ease;
-}
-.fade-enter-from,
-.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-6 transform-gpu;
-}
-.list-leave-to {
-  --at-apply: hidden
-}
-</style>
diff --git a/src/styles/index.ts b/src/styles/index.ts
index bd2b4062..234d9afa 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4,3 +4,4 @@ import './main.scss'
 import './reset.scss'
 import 'uno.css'
 import './adaptedStyles'
+import './transitionAndTransitionGroup.scss'
diff --git a/src/styles/transitionAndTransitionGroup.scss b/src/styles/transitionAndTransitionGroup.scss
new file mode 100644
index 00000000..6384597c
--- /dev/null
+++ b/src/styles/transitionAndTransitionGroup.scss
@@ -0,0 +1,36 @@
+.page-fade-enter-active,
+.page-fade-leave-active {
+  // transition: opacity 0.5s ease;
+  --at-apply: transition-opacity duration-500;
+}
+.page-fade-enter-from,
+.page-fade-leave-to {
+  --at-apply: opacity-0;
+}
+.page-fade-leave-to {
+  --at-apply: hidden
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  --at-apply: transition-opacity duration-500;
+
+  // transition: opacity 0.5s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  --at-apply: opacity-0;
+}
+
+.list-enter-active,
+.list-leave-active {
+  // transition: all 0.5s ease;
+  --at-apply: transition-all duration-500;
+}
+.list-enter-from,
+.list-leave-to {
+  --at-apply: opacity-0 transform translate-y-6 transform-gpu;
+}
+.list-leave-to {
+  --at-apply: hidden
+}
\ No newline at end of file