From 4fe9bb9bab429072dd7620799686780bbc8973fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=98=B1=E8=BE=BE?= <chen.yuda@ebiz-digits.com>
Date: Fri, 18 Apr 2025 16:33:38 +0800
Subject: [PATCH] =?UTF-8?q?feat(knowledge):=20=E4=BC=98=E5=8C=96=E7=9F=A5?=
 =?UTF-8?q?=E8=AF=86=E6=9E=84=E5=BB=BA=E6=AD=A5=E9=AA=A4=E7=9A=84=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在创建知识页面的步骤组件中添加 slide 过渡动画
- 使用 v-if 替代 v-show 以提高性能
- 新增 slide-in 动画关键帧，实现从无到有的放大效果
---
 src/views/knowledge/detail/create.vue | 37 +++++++++++++++++++++------
 1 file changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/views/knowledge/detail/create.vue b/src/views/knowledge/detail/create.vue
index 4f47e0c..625bd4f 100644
--- a/src/views/knowledge/detail/create.vue
+++ b/src/views/knowledge/detail/create.vue
@@ -12,14 +12,16 @@
         </el-steps>
 
         <div class="components">
-          <step-preprocessing ref="stepPreProcessing" v-show="active === 0" @getForm="getForm" @getDocumentId="getDocumentId"></step-preprocessing>
-          <step-split-config
-            ref="splitConfig"
-            v-show="active === 1"
-            @previewConfirmed="handlePreviewConfirm"
-            @handleReUpload="handleReUpload"
-          ></step-split-config>
-          <step-words ref="words" v-show="active === 2"></step-words>
+          <transition name="slide" appear mode="out-in">
+            <step-preprocessing ref="stepPreProcessing" v-if="active === 0" @getForm="getForm" @getDocumentId="getDocumentId"></step-preprocessing>
+            <step-split-config
+              ref="splitConfig"
+              v-if="active === 1"
+              @previewConfirmed="handlePreviewConfirm"
+              @handleReUpload="handleReUpload"
+            ></step-split-config>
+            <step-words ref="words" v-if="active === 2"></step-words>
+          </transition>
         </div>
       </div>
       <div class="card-bottom">
@@ -131,4 +133,23 @@ export default {
     width: 100%;
   }
 }
+
+.slide-enter-active {
+  animation: slide-in 0.5s;
+}
+.slide-leave-active {
+  animation: slide-in 0.5s reverse;
+}
+
+@keyframes slide-in {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.25);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
 </style>