From 2da3e852549b9be80275682c7ec173b4f9474e22 Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail.com>
Date: Fri, 2 Feb 2024 11:26:19 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E4=BC=98=E5=8C=96=E5=B1=9E=E6=80=A7?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=EF=BC=8C=E5=A2=9E=E5=8A=A0=E5=B1=95=E5=BC=80?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BpmnDesign/index.vue | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/BpmnDesign/index.vue b/src/components/BpmnDesign/index.vue
index ffa7423..413fa30 100644
--- a/src/components/BpmnDesign/index.vue
+++ b/src/components/BpmnDesign/index.vue
@@ -63,17 +63,18 @@
             <div ref="canvas" class="canvas" />
           </el-container>
           <div :class="{ 'process-panel': true, 'hide': panelFlag }">
-            <div class="process-panel-bar" @click="panelFlag = !panelFlag">
+            <div class="process-panel-bar" @click="panelBarClick">
               <div class="open-bar">
                 <el-link type="default" :underline="false">
                   <svg-icon class-name="open-bar" :icon-class="panelFlag ? 'caret-back' : 'caret-forward'"></svg-icon>
                 </el-link>
               </div>
             </div>
-
-            <div v-show="!panelFlag" v-if="bpmnModeler" class="panel-content">
-              <PropertyPanel :modeler="bpmnModeler" />
-            </div>
+            <transition enter-active-class="animate__animated animate__fadeIn">
+              <div v-show="showPanel" v-if="bpmnModeler" class="panel-content">
+                <PropertyPanel :modeler="bpmnModeler" />
+              </div>
+            </transition>
           </div>
         </el-container>
       </div>
@@ -104,6 +105,7 @@ const dialog = reactive({
 });
 
 const panelFlag = ref(false);
+const showPanel = ref(true);
 
 const xmlUploadRef = ref<ElUploadInstance>();
 
@@ -126,6 +128,14 @@ onMounted(() => {
   });
 });
 
+const panelBarClick = () => {
+  // 延迟执行，否则会导致面板收起时，属性面板不显示
+  panelFlag.value = !panelFlag.value;
+  setTimeout(() => {
+    showPanel.value = !panelFlag.value;
+  }, 100);
+};
+
 /**
  * 从文件加载xml
  */