AMAZEHOME/cook
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: emoji animation postion by fixed

Browse Source
This commit is contained in:
YunYouJun
2022-04-17 03:51:54 +08:00
parent 811851a38d
commit 3d9a701ea4
2 changed files with 7 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/AnimateStuff.vue
View File

@@ -7,7 +7,7 @@
<style> <style>
.animate-stuff { .animate-stuff {
visibility: hidden; visibility: hidden;
position: absolute; position: fixed;
z-index: 10; z-index: 10;
border-radius: 50%; border-radius: 50%;
transition: left .6s linear, top .6s cubic-bezier(0.5, -0.5, 1, 1); transition: left .6s linear, top .6s cubic-bezier(0.5, -0.5, 1, 1);

14
src/components/ChooseFood.vue
View File

@@ -38,9 +38,12 @@ const { x, y } = usePointer()
const animateStuff = ref() const animateStuff = ref()
const recipeBtn = ref<HTMLButtonElement>() const recipeBtn = ref<HTMLButtonElement>()
const { top, left } = useElementBounding(recipeBtn) const { top, left, right, bottom } = useElementBounding(recipeBtn)
const playAnimation = () => { const playAnimation = () => {
console.log(top.value)
console.log(bottom.value)
if (animateStuff.value) { if (animateStuff.value) {
const el = animateStuff.value.$el const el = animateStuff.value.$el
el.style.visibility = 'visible' el.style.visibility = 'visible'
@@ -50,8 +53,8 @@ const playAnimation = () => {
setTimeout(() => { setTimeout(() => {
el.style.visibility = 'visible' el.style.visibility = 'visible'
el.style.top = `${top.value}px` el.style.top = `${(top.value + bottom.value) / 2}px`
el.style.left = `${left.value}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)' el.style.transition = 'left .4s linear, top .4s cubic-bezier(0.5, -0.5, 1, 1)'
}, 0) }, 0)
@@ -89,11 +92,6 @@ const clickTool = (item: StuffItem) => {
const value = item.name const value = item.name
rStore.toggleTools(value) rStore.toggleTools(value)
if (curTools.value.includes(value)) {
playAnimation()
curEmoji.value = item.emoji
}
gtm?.trackEvent({ gtm?.trackEvent({
event: 'click', event: 'click',
category: `tool_${value}`, category: `tool_${value}`,