fix: emoji animation postion by createElement

src/components/AnimateStuff.vue

@@ -1,15 +0,0 @@
-<template>
-  <span class="animate-stuff" w="4" h="4">
-    <slot />
-  </span>
-</template>
-
-<style>
-.animate-stuff {
-  visibility: hidden;
-  position: fixed;
-  z-index: 10;
-  border-radius: 50%;
-  transition: left .6s linear, top .6s cubic-bezier(0.5, -0.5, 1, 1);
-}
-</style>

src/components/ChooseFood.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useGtm } from '@gtm-support/vue-gtm'
-import AnimateStuff from './AnimateStuff.vue'
+import { isClient } from '@vueuse/core'
 import type { StuffItem } from '~/data/food'
 import { meat, staple, tools, vegetable } from '~/data/food'
 import recipeData from '~/data/recipe.json'
@@ -35,39 +35,40 @@ const displayedRecipe = computed(() => {
 
 const { x, y } = usePointer()
 
-const animateStuff = ref()
 const recipeBtn = ref<HTMLButtonElement>()
 
-const { top, left, right, bottom } = useElementBounding(recipeBtn)
+const { top, left } = useElementBounding(recipeBtn)
 
+const curEmoji = ref('')
 const playAnimation = () => {
-  console.log(top.value)
+  if (!isClient)
-  console.log(bottom.value)
+    return
 
-  if (animateStuff.value) {
+  // 单个 Vue 组件实现不适合创建多个元素和清除动画
-    const el = animateStuff.value.$el
+  const emoji = document.createElement('span')
-    el.style.visibility = 'visible'
+  emoji.style.position = 'fixed'
-    el.style.top = `${y.value}px`
+  emoji.style.left = `${x.value}px`
-    el.style.left = `${x.value}px`
+  emoji.style.top = `${y.value}px`
-    el.style.transition = 'none'
+  emoji.style.zIndex = '10'
+  emoji.style.transition = 'left .4s linear, top .4s cubic-bezier(0.5, -0.5, 1, 1)'
+  emoji.textContent = curEmoji.value
 
-    setTimeout(() => {
+  document.body.appendChild(emoji)
-      el.style.visibility = 'visible'
-      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)
 
-    el.ontransitionend = () => {
+  setTimeout(() => {
-      el.style.visibility = 'hidden'
+    if (top.value)
-    }
+      emoji.style.top = `${top.value}px`
+    if (left.value)
+      emoji.style.left = `${left.value + 12}px`
+  }, 0)
+
+  emoji.ontransitionend = () => {
+    emoji.remove()
   }
 }
 
 const gtm = useGtm()
 
-const curEmoji = ref('')
-
 const toggleStuff = (item: StuffItem, category = '', e?: Event) => {
   rStore.toggleStuff(item.name)
 
@@ -105,11 +106,6 @@ const { isVisible, show } = useInvisibleElement(recipePanel)
 </script>
 
 <template>
-  <Transition>
-    <AnimateStuff ref="animateStuff">
-      {{ curEmoji }}
-    </AnimateStuff>
-  </Transition>
   <Transition>
     <button
       v-if="displayedRecipe.length !== recipe.length && isVisible"

src/modules/gtm.ts

@@ -5,6 +5,6 @@ export const install: UserModule = ({ app }) => {
   // add google tag manager, and add GA4 in gtag
   app.use(createGtm({
     id: 'GTM-5FJSV46',
-    debug: import.meta.env.DEV,
+    // debug: import.meta.env.DEV,
   }))
 }