feat: 新增过渡动画

src/components.d.ts

@@ -7,14 +7,14 @@ export {}
 
 declare module "vue" {
   export interface GlobalComponents {
+    BarcodeDraw: (typeof import("./components/barcode-draw/index.vue"))["default"];
     CodeView: (typeof import("./components/code-view/index.vue"))["default"];
-    DrawBarcode: (typeof import("./components/draw-barcode/index.vue"))["default"];
-    DrawQrcode: (typeof import("./components/draw-qrcode/index.vue"))["default"];
     ExternalLinkPage: (typeof import("./components/external-link-page/index.vue"))["default"];
     FillPage: (typeof import("./components/fill-page/index.vue"))["default"];
     InternalLinkPage: (typeof import("./components/internal-link-page/index.vue"))["default"];
     LangProvider: (typeof import("./components/lang-provider/index.vue"))["default"];
     MainTransition: (typeof import("./components/main-transition/index.vue"))["default"];
+    QrcodeDraw: (typeof import("./components/qrcode-draw/index.vue"))["default"];
     RouterLink: (typeof import("vue-router"))["RouterLink"];
     RouterView: (typeof import("vue-router"))["RouterView"];
     SelectIcon: (typeof import("./components/select-icon/index.vue"))["default"];

src/layout/components/Header/components/Breadcrumb/index.vue

@@ -41,7 +41,13 @@ const breadcrumb = computed(() => {
 
 // 页面过渡
 const transition = computed(() => {
-  return transitionPage.value === "fadeInOut" ? "fadeInOut-enter-active" : "cardInOut-enter-active";
+  if (transitionPage.value === "fadeInOut") {
+    return "fadeInOut-enter-active";
+  } else if (transitionPage.value === "cardInOut") {
+    return "cardInOut-enter-active";
+  } else {
+    return "fadeOut-enter-active";
+  }
 });
 
 // 面包屑跳转

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

@@ -42,7 +42,7 @@
         </div>
         <div class="flex-row">
           <div>页面过渡</div>
-          <a-select v-model="transitionPage" :style="{ width: '100px' }" placeholder="请选择">
+          <a-select v-model="transitionPage" :style="{ width: '120px' }" placeholder="请选择">
             <a-option v-for="item in transitions" :key="item.value" :value="item.value" :label="item.label" />
           </a-select>
         </div>
@@ -82,7 +82,8 @@ const layoutList = reactive({
 
 const transitions = ref([
   { value: "fadeInOut", label: "轻过渡" },
-  { value: "cardInOut", label: "卡片" }
+  { value: "cardInOut", label: "卡片" },
+  { value: "fadeOut", label: "消退" }
 ]);
 
 interface IThemeColor {

src/style/global-transition.scss

@@ -75,19 +75,6 @@
   }
 }
 
-@keyframes swing-in-top-fwd {
-  0% {
-    opacity: 0;
-    transform: rotateX(-100deg);
-    transform-origin: top;
-  }
-  100% {
-    opacity: 1;
-    transform: rotateX(0deg);
-    transform-origin: top;
-  }
-}
-
 // 离开
 .cardInOut-leave-active {
   animation: swing-out-top-bck 0.25s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
@@ -106,15 +93,31 @@
   }
 }
 
-@keyframes swing-out-top-bck {
+/* 淡入淡出 */
+// 进入
+.fadeOut-enter-active {
+  animation: fade-in 0.25s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+// 离开
+.fadeOut-leave-active {
+  animation: fade-out 0.25s ease-out both;
+}
+
+@keyframes fade-out {
   0% {
     opacity: 1;
-    transform: rotateX(0deg);
-    transform-origin: top;
   }
   100% {
     opacity: 0;
-    transform: rotateX(-100deg);
-    transform-origin: top;
   }
 }

src/views/component/barcode/barcode.vue

@@ -6,14 +6,14 @@
           <div class="code-box">
             <a-card v-for="item in codeList" :key="item.id" :title="item.docs" :style="{ width: '400px' }" hoverable>
               <div class="card-content">
-                <draw-barcode :tag="item.tag" :text="item.text" :options="item.options" />
+                <barcode-draw :tag="item.tag" :text="item.text" :options="item.options" />
               </div>
             </a-card>
           </div>
         </a-col>
         <a-col :span="9">
           <a-scrollbar style="height: 625px; overflow: auto">
-            <CodeView :code-json="codeJson" style="width: 100%" />
+            <code-view :code-json="codeJson" style="width: 100%" />
           </a-scrollbar>
         </a-col>
       </a-row>

src/views/component/draggable/draggable.vue

@@ -16,7 +16,7 @@
             <template #item="{ element }">
               <div class="draggable-list" :class="!animated && 'animated-fade-up-' + element.value">
                 <div class="draggable-inner">
-                  <SvgIcon :name="element.svg" :size="30" class="svg-box" />
+                  <svg-icon :name="element.svg" :size="30" class="svg-box" />
                   <div>{{ element.label }}</div>
                 </div>
               </div>
@@ -28,7 +28,7 @@
         </div>
       </a-space>
       <a-scrollbar style="height: 396px; overflow: auto" outer-class="scrollbar">
-        <CodeView :code-json="codeJson" style="width: 500px" />
+        <code-view :code-json="codeJson" style="width: 500px" />
       </a-scrollbar>
     </div>
   </div>

src/views/component/qrcode/qrcode.vue

@@ -6,14 +6,14 @@
           <div class="code-box">
             <a-card v-for="item in codeList" :key="item.id" :title="item.docs" :style="{ width: '300px' }" hoverable>
               <div class="card-content">
-                <draw-qrcode :tag="item.tag" :text="item.text" :options="item.options" />
+                <qrcode-draw :tag="item.tag" :text="item.text" :options="item.options" />
               </div>
             </a-card>
           </div>
         </a-col>
         <a-col :span="12">
           <a-scrollbar style="height: 410px; overflow: auto">
-            <CodeView :code-json="codeJson" style="width: 100%" />
+            <code-view :code-json="codeJson" style="width: 100%" />
           </a-scrollbar>
         </a-col>
       </a-row>