bug: 335 优化动画

src/renderer/src/views/tool/components/side.vue

@@ -2,17 +2,19 @@
   <div class="warp" ref="btnRef" :style="isFold?'min-height:auto;':''">
     <slot name="start"></slot>
     <!-- 工具按钮 -->
-    <el-space direction="vertical" v-show="!isFold">
+    <transition name="el-zoom-in-bottom">
-      <template v-for="(item,index) in list">
+      <el-space direction="vertical" v-show="!isFold">
-        <slot :name="item.prop" :item="item" :index="index">
+        <template v-for="(item,index) in list">
-          <div class="c-btn flex flex-col items-center gap-2 p-2" @click.stop="clickHandel(item,$event)">
+          <slot :name="item.prop" :item="item" :index="index">
-            <i class="iconfont" :class="item.icon" :style="item.style" />
+            <div class="c-btn flex flex-col items-center gap-2 p-2" @click.stop="clickHandel(item,$event)">
-            <span>{{item.label||item.text||item.name}}</span>
+              <i class="iconfont" :class="item.icon" :style="item.style" />
-          </div>
+              <span>{{item.label||item.text||item.name}}</span>
-        </slot>
+            </div>
-      </template>
+          </slot>
-      <slot name="append"></slot>
+        </template>
-    </el-space>
+        <slot name="append"></slot>
+      </el-space>
+    </transition>
     <slot name="end">
       <span class="fold" @click="isFold=!isFold" :style="isFold?'margin: 5px;':''">
         {{isFold?'<<<':'>>>'}}

src/renderer/src/views/tool/directive/drag.js

@@ -36,6 +36,7 @@ class Drag {
     const {cx, cy} = this.getMousePos(e)
     this.x = cx
     this.y = cy
+    this.getCurPos() // 被拖拽元素初始坐标
     // 手动-触发事件 v-drag-start
     this.el.dispatchEvent(new CustomEvent('v-drag-start', {detail:{drag: this}}))
   }
@@ -85,12 +86,20 @@ class Drag {
   }
   // 获取移动后坐标
   getPos(x, y) {
-    const w = this.max.w - this.toRound(this.el.clientWidth)
+    // 边界控制：图标元素
-    const h = this.max.h - this.toRound(this.el.clientHeight)
+    // const w = this.max.w - this.toRound(this.el.clientWidth)
+    // const h = this.max.h - this.toRound(this.el.clientHeight)
+    // 边界控制：整个工具
+    const w = this.max.w - this.toRound(this.handle.clientWidth)
+    const h = this.max.h - this.toRound(this.handle.clientHeight)
     x = x < 0 ? 0 : x > w ? w : x
     y = y < 0 ? 0 : y > h ? h : y
     return { x, y }
   }
+  getCurPos(dom) {
+    const pos = this[dom||'handle']?.getBoundingClientRect()
+    this.data = {left:this.toRound(pos.left), top:this.toRound(pos.top)}
+  }
   // 小数转整数
   toRound = v => Math.round(v)
 }

src/renderer/src/views/tool/sphere.vue

@@ -20,17 +20,19 @@
           <el-image :src="logo" draggable="false" />
         </div>
       </div>
-      <div class="tool-btns" v-show="!isFold">
+      <transition name="a-fade">
-        <el-segmented class="c-btns" v-model="tabActive" :options="btnList" size="large" block
+        <div class="tool-btns" v-if="!isFold">
-          @change="tabChange">
+          <el-segmented class="c-btns" v-model="tabActive" :options="btnList" size="large" block
-          <template #default="{item}">
+            @change="tabChange">
-            <div class="c-btn flex flex-col items-center gap-2 p-2">
+            <template #default="{item}">
-              <i class="iconfont" :class="item.icon" :style="item.style" />
+              <div class="c-btn flex flex-col items-center gap-2 p-2">
-              <span>{{item.label}}</span>
+                <i class="iconfont" :class="item.icon" :style="item.style" />
-            </div>
+                <span>{{item.label}}</span>
-          </template>
+              </div>
-        </el-segmented>
+            </template>
-      </div>
+          </el-segmented>
+        </div>
+      </transition>
     </div>
   </div>
 </template>
@@ -109,6 +111,23 @@ const tabChange = (val) => {
 const logoHandle = (e,t) => {
   if (Date.now() - dragtime.value < 200) {
     isFold.value = !isFold.value
+    setTimeout(() => {
+      // 处理: 工具被拖动到右侧时功能被遮挡
+      const dom = document.querySelector('.tool-bottom-all')
+      const { x } = dom.getBoundingClientRect()
+      const w = window.innerWidth - (470 || 80)
+      // if (x > w) dom.style.left = `${w}px`
+      if (x > w) { // 动画
+        let left = x
+        const animatFn = () => {
+          left-=30
+          if (left < w) left == w
+          dom.style.left = `${left}px`
+          if (left > w) requestAnimationFrame(animatFn)
+        }
+        requestAnimationFrame(animatFn)
+      }
+    }, 20);
   }
 }
 // 底部工具栏：移入移出-是否穿透
@@ -262,4 +281,15 @@ watchEffect(() => {
     }
   }
 }
+.a-fade-leave-active,.a-fade-enter-active{
+  transition: all .3s;
+}
+.a-fade-enter-from,.a-fade-leave-to{
+  width: 0;
+  opacity: 0;
+}
+.a-fade-enter-to,.a-fade-leave-from{
+  width: 350px;
+  opacity: 1;
+}
 </style>