update 优化属性面板，增加展开动画

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
  */