From 3d9a701ea44bf474a23cd24e79a7f6a0e9ef821f Mon Sep 17 00:00:00 2001
From: YunYouJun <me@yunyoujun.cn>
Date: Sun, 17 Apr 2022 03:51:54 +0800
Subject: [PATCH] fix: emoji animation postion by fixed

---
 src/components/AnimateStuff.vue |  2 +-
 src/components/ChooseFood.vue   | 14 ++++++--------
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/AnimateStuff.vue b/src/components/AnimateStuff.vue
index 47a9bbe..059dea6 100644
--- a/src/components/AnimateStuff.vue
+++ b/src/components/AnimateStuff.vue
@@ -7,7 +7,7 @@
 <style>
 .animate-stuff {
   visibility: hidden;
-  position: absolute;
+  position: fixed;
   z-index: 10;
   border-radius: 50%;
   transition: left .6s linear, top .6s cubic-bezier(0.5, -0.5, 1, 1);
diff --git a/src/components/ChooseFood.vue b/src/components/ChooseFood.vue
index 70eb937..894a057 100644
--- a/src/components/ChooseFood.vue
+++ b/src/components/ChooseFood.vue
@@ -38,9 +38,12 @@ const { x, y } = usePointer()
 const animateStuff = ref()
 const recipeBtn = ref<HTMLButtonElement>()
 
-const { top, left } = useElementBounding(recipeBtn)
+const { top, left, right, bottom } = useElementBounding(recipeBtn)
 
 const playAnimation = () => {
+  console.log(top.value)
+  console.log(bottom.value)
+
   if (animateStuff.value) {
     const el = animateStuff.value.$el
     el.style.visibility = 'visible'
@@ -50,8 +53,8 @@ const playAnimation = () => {
 
     setTimeout(() => {
       el.style.visibility = 'visible'
-      el.style.top = `${top.value}px`
-      el.style.left = `${left.value}px`
+      el.style.top = `${(top.value + bottom.value) / 2}px`
+      el.style.left = `${(left.value + right.value) / 2}px`
       el.style.transition = 'left .4s linear, top .4s cubic-bezier(0.5, -0.5, 1, 1)'
     }, 0)
 
@@ -89,11 +92,6 @@ const clickTool = (item: StuffItem) => {
   const value = item.name
   rStore.toggleTools(value)
 
-  if (curTools.value.includes(value)) {
-    playAnimation()
-    curEmoji.value = item.emoji
-  }
-
   gtm?.trackEvent({
     event: 'click',
     category: `tool_${value}`,