feat(knowledge): 优化知识构建步骤的切换效果

- 在创建知识页面的步骤组件中添加 slide 过渡动画
- 使用 v-if 替代 v-show 以提高性能
- 新增 slide-in 动画关键帧，实现从无到有的放大效果

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>
+          <transition name="slide" appear mode="out-in">
-          <step-split-config
+            <step-preprocessing ref="stepPreProcessing" v-if="active === 0" @getForm="getForm" @getDocumentId="getDocumentId"></step-preprocessing>
-            ref="splitConfig"
+            <step-split-config
-            v-show="active === 1"
+              ref="splitConfig"
-            @previewConfirmed="handlePreviewConfirm"
+              v-if="active === 1"
-            @handleReUpload="handleReUpload"
+              @previewConfirmed="handlePreviewConfirm"
-          ></step-split-config>
+              @handleReUpload="handleReUpload"
-          <step-words ref="words" v-show="active === 2"></step-words>
+            ></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>