From 0035923e3c4d332dc896db8a99b226c1b44e8316 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Fri, 5 Nov 2021 16:48:50 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=8A=A8=E7=94=BB=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E6=8A=96=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Editor/Toolbar/ElementAnimationPanel.vue  | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/views/Editor/Toolbar/ElementAnimationPanel.vue b/src/views/Editor/Toolbar/ElementAnimationPanel.vue
index e9ebf128..7d7204d5 100644
--- a/src/views/Editor/Toolbar/ElementAnimationPanel.vue
+++ b/src/views/Editor/Toolbar/ElementAnimationPanel.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="element-animation-panel">
     <div class="element-animation" v-if="handleElement">
-      <Popover trigger="click" v-model:visible="animationPoolVisible" v-if="!['chart', 'video'].includes(handleElement.type)">
+      <Popover 
+        trigger="click" 
+        v-model:visible="animationPoolVisible" 
+        v-if="!['chart', 'video'].includes(handleElement.type)"
+        @visibleChange="visible => handlePopoverVisibleChange(visible)"
+      >
         <template #content>
           <div class="animation-pool">
             <div class="pool-type" v-for="type in animations" :key="type.name">
@@ -27,6 +32,7 @@
                 </div>
               </div>
             </div>
+            <div class="mask" v-if="!popoverMaskHide"></div>
           </div>
         </template>
         <Button class="element-animation-btn">
@@ -239,6 +245,15 @@ export default defineComponent({
       runAnimation(handleElement.value.id, type, defaultDuration)
     }
 
+    // 动画选择面板打开500ms后再移除遮罩层，否则打开面板后迅速滑入鼠标预览会导致抖动
+    const popoverMaskHide = ref(false)
+    const handlePopoverVisibleChange = (visible: boolean) => {
+      if (visible) {
+        setTimeout(() => popoverMaskHide.value = true, 500)
+      }
+      else popoverMaskHide.value = false
+    }
+
     return {
       handleElement,
       animationPoolVisible,
@@ -247,11 +262,13 @@ export default defineComponent({
       hoverPreviewAnimation,
       handleElementAnimation,
       handleElementAnimationName,
+      popoverMaskHide,
       addAnimation,
       deleteAnimation,
       handleDragEnd,
       runAnimation,
       updateElementAnimationDuration,
+      handlePopoverVisibleChange,
     }
   },
 })
@@ -280,6 +297,15 @@ export default defineComponent({
   font-size: 12px;
   margin-right: -12px;
   padding-right: 12px;
+  position: relative;
+
+  .mask {
+    width: 400px;
+    height: 500px;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
 }
 .type-title {
   width: 100%;