From 81f48438b100459ba7216f1a469e1394a8fb70c4 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <1171051090@qq.com>
Date: Wed, 20 Jan 2021 13:49:40 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=8A=A8=E7=94=BB=E9=9D=A2?=
 =?UTF-8?q?=E6=9D=BF=E6=98=BE=E7=A4=BA=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/plugins/iconPark.ts                            |  2 ++
 src/views/Editor/Toolbar/ElementAnimationPanel.vue | 11 +++++++++--
 src/views/Editor/Toolbar/index.vue                 |  3 ++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/plugins/iconPark.ts b/src/plugins/iconPark.ts
index 673361dd..fdf24339 100644
--- a/src/plugins/iconPark.ts
+++ b/src/plugins/iconPark.ts
@@ -98,6 +98,7 @@ import {
   CloseSmall,
   Undo,
   Transform,
+  Click,
 } from '@icon-park/vue-next'
 
 export default {
@@ -229,5 +230,6 @@ export default {
     app.component('IconSeoFolder', SeoFolder)
     app.component('IconUndo', Undo)
     app.component('IconTransform', Transform)
+    app.component('IconClick', Click)
   }
 }
\ No newline at end of file
diff --git a/src/views/Editor/Toolbar/ElementAnimationPanel.vue b/src/views/Editor/Toolbar/ElementAnimationPanel.vue
index 731e5961..2eb6b578 100644
--- a/src/views/Editor/Toolbar/ElementAnimationPanel.vue
+++ b/src/views/Editor/Toolbar/ElementAnimationPanel.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="element-animation-panel">
-    <div class="element-animation">
+    <div class="element-animation" v-if="handleElement">
       <Popover trigger="click" v-model:visible="animationPoolVisible">
         <template #content>
           <div class="animation-pool">
@@ -29,6 +29,8 @@
         </Button>
       </Popover>
     </div>
+
+    <div class="tip" v-else><IconClick /> 选中画布中的元素添加动画</div>
     
     <Divider />
 
@@ -42,7 +44,7 @@
       itemKey="id"
     >
       <template #item="{ element, index }">
-        <div class="sequence-item" :class="{ 'active': handleElement.id === element.elId }">
+        <div class="sequence-item" :class="{ 'active': handleElement?.id === element.elId }">
           <div class="index">{{index + 1}}</div>
           <div class="text">【{{element.elType}}】{{element.animationType}}</div>
           <div class="handler">
@@ -200,6 +202,11 @@ export default defineComponent({
 .element-animation-btn {
   width: 100%;
 }
+.tip {
+  text-align: center;
+  font-style: italic;
+  padding-top: 12px;
+}
 .animation-pool {
   width: 400px;
   height: 500px;
diff --git a/src/views/Editor/Toolbar/index.vue b/src/views/Editor/Toolbar/index.vue
index dd04f42d..038ae7f1 100644
--- a/src/views/Editor/Toolbar/index.vue
+++ b/src/views/Editor/Toolbar/index.vue
@@ -41,7 +41,8 @@ export default defineComponent({
     ]
     const slideTabs = [
       { label: '页面样式', value: ToolbarStates.SLIDE_STYLE },
-      { label: '翻页动画', value: ToolbarStates.SLIDE_ANIMATION },
+      { label: '切换', value: ToolbarStates.SLIDE_ANIMATION },
+      { label: '动画', value: ToolbarStates.EL_ANIMATION },
     ]
     const multiSelectTabs = [
       { label: '位置', value: ToolbarStates.MULTI_POSITION },