feat: 过渡组件

src/components/main-transition/index.vue

@@ -1,38 +1,16 @@
 <template>
-  <Transition name="slideRight" mode="out-in" appear>
+  <Transition :name="transitionPage === 'fadeIn' ? 'fadeInOut' : 'cardInOut'" mode="out-in" appear>
     <!-- 向内传递插槽内容 -->
     <slot></slot>
   </Transition>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { storeToRefs } from "pinia";
+import { useThemeConfig } from "@/store/modules/theme-config";
 
-<style lang="scss" scoped>
+const themeStore = useThemeConfig();
-// Transition过渡动画
+const { transitionPage } = storeToRefs(themeStore);
-.slideRight-enter-active {
+</script>
-  animation: slide-enter-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+
-}
+<style lang="scss" scoped></style>
-.slideRight-leave-active {
-  animation: slide-leave-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
-}
-@keyframes slide-enter-right {
-  0% {
-    opacity: 0;
-    transform: translateX(-20px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-@keyframes slide-leave-right {
-  0% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  100% {
-    opacity: 0;
-    transform: translateX(20px);
-  }
-}
-</style>

src/layout/components/Header/components/theme-settings/index.vue

@@ -42,9 +42,8 @@
         </div>
         <div class="flex-row">
           <div>页面过渡</div>
-          <a-select :style="{ width: '100px' }" placeholder="请选择">
+          <a-select v-model="transitionPage" :style="{ width: '100px' }" placeholder="请选择">
-            <a-option>轻过渡</a-option>
+            <a-option v-for="item in transitions" :key="item.value" :value="item.value" :label="item.label" />
-            <a-option>卡片</a-option>
           </a-select>
         </div>
       </div>
@@ -58,7 +57,8 @@ import { useThemeConfig } from "@/store/modules/theme-config";
 import { useThemeMethods } from "@/hooks/useThemeMethods";
 
 const themeStore = useThemeConfig();
-const { layoutType, themeColor, presetColors, colorWeakMode, grayMode, darkMode, asideDark } = storeToRefs(themeStore);
+const { layoutType, themeColor, presetColors, colorWeakMode, grayMode, darkMode, asideDark, transitionPage } =
+  storeToRefs(themeStore);
 
 const layoutList = reactive({
   layoutDefaults: {
@@ -78,6 +78,10 @@ const layoutList = reactive({
   }
 });
 
+const transitions = ref([
+  { value: "fadeInOut", label: "轻过渡" },
+  { value: "cardInOut", label: "卡片" }
+]);
 // 主题色设置
 const themeColorChange = (value: string) => {
   themeColor.value = value;

src/store/modules/theme-config.ts

@@ -18,6 +18,7 @@ interface ThemeConfig {
   grayMode: Boolean;
   colorWeakMode: Boolean;
   asideDark: Boolean;
+  transitionPage: string;
   themeColor: string;
   presetColors: Array<string>;
 }
@@ -49,6 +50,7 @@ export const useThemeConfig = defineStore("theme-config", {
     colorWeakMode: false, // 色弱模式
     grayMode: false, // 灰色模式
     asideDark: false, // 侧边栏深色
+    transitionPage: "fadeInOut", // 页面过渡方式
     themeColor: "#165DFF", // 主题色
     presetColors: [
       "#165DFF",

src/style/global-transition.scss

@@ -1,9 +1,62 @@
-/* global css transition */
+/* global css transition */
-// 旋转180deg
+// Transition过渡动画
-.rotate-180 {
+
-  transform: rotate(0deg);
+/* 轻过渡 */
-  transition: transform 0.2s;
+// 进入
-  &:hover {
+.fadeInOut-enter-active {
-    transform: rotate(180deg);
+  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;
+}
+@keyframes slide-enter-right {
+  0% {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes slide-leave-right {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+}
+
+/* 卡片 */
+// 进入
+.cardInOut-enter-active {
+  animation: slide-in-bck-center 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+// 离开
+.cardInOut-leave-active {
+  animation: slide-out-bck-center 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
+}
+@keyframes slide-in-bck-center {
+  0% {
+    transform: translateZ(600px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateZ(0);
+    opacity: 1;
+  }
+}
+@keyframes slide-out-bck-center {
+  0% {
+    transform: translateZ(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translateZ(-1100px);
+    opacity: 0;
+  }
+}