From 70a5f49275193c9d83edb8aebaff3df4e942df97 Mon Sep 17 00:00:00 2001
From: wf <2547096351@qq.com>
Date: Tue, 7 May 2024 13:43:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A1=B5=E9=9D=A2=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=E8=BF=87=E6=B8=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/main-transition/index.vue |   2 +-
 src/style/global-transition.scss         | 104 +++++++++++++++++++----
 2 files changed, 87 insertions(+), 19 deletions(-)

diff --git a/src/components/main-transition/index.vue b/src/components/main-transition/index.vue
index 3f55c45..67fb754 100644
--- a/src/components/main-transition/index.vue
+++ b/src/components/main-transition/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <Transition :name="transitionPage === 'fadeIn' ? 'fadeInOut' : 'cardInOut'" mode="out-in" appear>
+  <Transition :name="transitionPage" mode="out-in" appear>
     <!-- 向内传递插槽内容 -->
     <slot></slot>
   </Transition>
diff --git a/src/style/global-transition.scss b/src/style/global-transition.scss
index 1605255..38e67a2 100644
--- a/src/style/global-transition.scss
+++ b/src/style/global-transition.scss
@@ -4,11 +4,18 @@
 /* 轻过渡 */
 // 进入
 .fadeInOut-enter-active {
+  -webkit-animation: slide-enter-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
   animation: slide-enter-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
 }
-// 离开
-.fadeInOut-leave-active {
-  animation: slide-leave-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+@-webkit-keyframes slide-enter-right {
+  0% {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 @keyframes slide-enter-right {
   0% {
@@ -20,6 +27,21 @@
     transform: translateX(0);
   }
 }
+// 离开
+.fadeInOut-leave-active {
+  -webkit-animation: slide-leave-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  animation: slide-leave-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+@-webkit-keyframes slide-leave-right {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+}
 @keyframes slide-leave-right {
   0% {
     opacity: 1;
@@ -34,29 +56,75 @@
 /* 卡片 */
 // 进入
 .cardInOut-enter-active {
-  animation: slide-in-bck-center 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  -webkit-animation: swing-in-top-fwd 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
+  animation: swing-in-top-fwd 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
+}
+@-webkit-keyframes swing-in-top-fwd {
+  0% {
+    -webkit-transform: rotateX(-100deg);
+    transform: rotateX(-100deg);
+    -webkit-transform-origin: top;
+    transform-origin: top;
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: rotateX(0deg);
+    transform: rotateX(0deg);
+    -webkit-transform-origin: top;
+    transform-origin: top;
+    opacity: 1;
+  }
+}
+@keyframes swing-in-top-fwd {
+  0% {
+    -webkit-transform: rotateX(-100deg);
+    transform: rotateX(-100deg);
+    -webkit-transform-origin: top;
+    transform-origin: top;
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: rotateX(0deg);
+    transform: rotateX(0deg);
+    -webkit-transform-origin: top;
+    transform-origin: top;
+    opacity: 1;
+  }
 }
 // 离开
 .cardInOut-leave-active {
-  animation: slide-out-bck-center 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
+  -webkit-animation: swing-out-top-bck 0.25s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
+  animation: swing-out-top-bck 0.25s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
 }
-@keyframes slide-in-bck-center {
+@-webkit-keyframes swing-out-top-bck {
   0% {
-    transform: translateZ(600px);
-    opacity: 0;
-  }
-  100% {
-    transform: translateZ(0);
-    opacity: 1;
-  }
-}
-@keyframes slide-out-bck-center {
-  0% {
-    transform: translateZ(0);
+    -webkit-transform: rotateX(0deg);
+    transform: rotateX(0deg);
+    -webkit-transform-origin: top;
+    transform-origin: top;
     opacity: 1;
   }
   100% {
-    transform: translateZ(-1100px);
+    -webkit-transform: rotateX(-100deg);
+    transform: rotateX(-100deg);
+    -webkit-transform-origin: top;
+    transform-origin: top;
+    opacity: 0;
+  }
+}
+@keyframes swing-out-top-bck {
+  0% {
+    -webkit-transform: rotateX(0deg);
+    transform: rotateX(0deg);
+    -webkit-transform-origin: top;
+    transform-origin: top;
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: rotateX(-100deg);
+    transform: rotateX(-100deg);
+    -webkit-transform-origin: top;
+    transform-origin: top;
     opacity: 0;
   }
 }