浏览代码

优化元素动画选择面板体验

pipipi-pikachu 5 年之前
父节点
当前提交
1f227e19ae
共有 1 个文件被更改,包括 12 次插入7 次删除
  1. 12 7
      src/views/Editor/Toolbar/ElementAnimationPanel.vue

+ 12 - 7
src/views/Editor/Toolbar/ElementAnimationPanel.vue

@@ -10,15 +10,20 @@
                 <div 
                   class="pool-item" 
                   v-for="item in type.children" :key="item.name"
-                  :class="[
-                    'animate__animated',
-                    'animate__faster',
-                    hoverPreviewAnimation === item.value && `animate__${item.value}`,
-                  ]"
-                  @mouseover="hoverPreviewAnimation = item.value"
+                  @mouseenter="hoverPreviewAnimation = item.value"
+                  @mouseleave="hoverPreviewAnimation = ''"
                   @click="addAnimation(item.value)"
                 >
-                  {{item.name}}
+                  <div 
+                    class="animation-box"
+                    :class="[
+                      'animate__animated',
+                      'animate__faster',
+                      hoverPreviewAnimation === item.value && `animate__${item.value}`,
+                    ]"
+                  >
+                    {{item.name}}
+                  </div>
                 </div>
               </div>
             </div>