atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-07 22:49:31 -07:00
Code Issues Packages Projects Releases Wiki Activity

fix: issue#84

Browse Source
This commit is contained in:
xzadudu179
2025-08-28 18:12:05 +08:00
parent 2f685601a3
commit 3693222016
1 changed files with 10 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/content/Animations/TargetCursor/TargetCursor.vue
View File

@@ -35,7 +35,7 @@ const moveCursor = (x: number, y: number) => {
}); });
}; };
let cleanupAnimation: () => void = () => {}; let cleanupAnimation: () => void = () => { };
const setupAnimation = () => { const setupAnimation = () => {
if (!cursorRef.value) return; if (!cursorRef.value) return;
@@ -116,7 +116,7 @@ const setupAnimation = () => {
activeTarget = target; activeTarget = target;
gsap.killTweensOf(cursorRef.value, 'rotation'); gsap.killTweensOf(cursorRef.value);
spinTl.value?.pause(); spinTl.value?.pause();
gsap.set(cursorRef.value, { rotation: 0 }); gsap.set(cursorRef.value, { rotation: 0 });
@@ -336,30 +336,22 @@ watch(
</script> </script>
<template> <template>
<div <div ref="cursorRef"
ref="cursorRef"
class="top-0 left-0 z-[9999] fixed w-0 h-0 -translate-x-1/2 -translate-y-1/2 pointer-events-none mix-blend-difference transform opacity-0" class="top-0 left-0 z-[9999] fixed w-0 h-0 -translate-x-1/2 -translate-y-1/2 pointer-events-none mix-blend-difference transform opacity-0"
:style="{ willChange: 'transform' }" :style="{ willChange: 'transform' }">
> <div class="top-1/2 left-1/2 absolute bg-white rounded-full w-1 h-1 -translate-x-1/2 -translate-y-1/2 transform"
<div :style="{ willChange: 'transform' }" />
class="top-1/2 left-1/2 absolute bg-white rounded-full w-1 h-1 -translate-x-1/2 -translate-y-1/2 transform"
:style="{ willChange: 'transform' }"
/>
<div <div
class="top-1/2 left-1/2 absolute border-[3px] border-white border-r-0 border-b-0 w-3 h-3 -translate-x-[150%] -translate-y-[150%] target-cursor-corner transform" class="top-1/2 left-1/2 absolute border-[3px] border-white border-r-0 border-b-0 w-3 h-3 -translate-x-[150%] -translate-y-[150%] target-cursor-corner transform"
:style="{ willChange: 'transform' }" :style="{ willChange: 'transform' }" />
/>
<div <div
class="top-1/2 left-1/2 absolute border-[3px] border-white border-b-0 border-l-0 w-3 h-3 -translate-y-[150%] translate-x-1/2 target-cursor-corner transform" class="top-1/2 left-1/2 absolute border-[3px] border-white border-b-0 border-l-0 w-3 h-3 -translate-y-[150%] translate-x-1/2 target-cursor-corner transform"
:style="{ willChange: 'transform' }" :style="{ willChange: 'transform' }" />
/>
<div <div
class="top-1/2 left-1/2 absolute border-[3px] border-white border-t-0 border-l-0 w-3 h-3 translate-x-1/2 translate-y-1/2 target-cursor-corner transform" class="top-1/2 left-1/2 absolute border-[3px] border-white border-t-0 border-l-0 w-3 h-3 translate-x-1/2 translate-y-1/2 target-cursor-corner transform"
:style="{ willChange: 'transform' }" :style="{ willChange: 'transform' }" />
/>
<div <div
class="top-1/2 left-1/2 absolute border-[3px] border-white border-t-0 border-r-0 w-3 h-3 -translate-x-[150%] translate-y-1/2 target-cursor-corner transform" class="top-1/2 left-1/2 absolute border-[3px] border-white border-t-0 border-r-0 w-3 h-3 -translate-x-[150%] translate-y-1/2 target-cursor-corner transform"
:style="{ willChange: 'transform' }" :style="{ willChange: 'transform' }" />
/>
</div> </div>
</template> </template>