fix: ref

Author: jiyuujin

app/components/shapes/HeadCircle.vue

@@ -35,20 +35,20 @@ export default defineComponent({
 
   setup(props, setupContext) {
     const { createAnimation, fadeAnimation, transformPosition } = useAnimationParts()
-    const refs = setupContext.refs
+    const shape = ref()
 
     const KEY_FRAME = [0, 60]
 
     const transform = transformPosition(props)
 
     const createAnimations = () => {
       setTimeout(() => {
-        createAnimation(refs.shape, { r: KEY_FRAME[1] })
+        createAnimation(shape.value, { r: KEY_FRAME[1] })
       }, 0)
     }
 
     const fadeAnimations = () => {
-      fadeAnimation(refs.shape, { r: KEY_FRAME[0] })
+      fadeAnimation(shape.value, { r: KEY_FRAME[0] })
     }
 
     onMounted(() => {

app/components/shapes/HeadCross.vue

@@ -49,7 +49,10 @@ export default defineComponent({
 
   setup(props, setupContext) {
     const { createAnimation, fadeAnimation, transformPosition } = useAnimationParts()
-    const refs = setupContext.refs
+    const shape1 = ref()
+    const shape2 = ref()
+    const shape3 = ref()
+    const shape4 = ref()
 
     const KEY_FRAME1 = ['0 -60 0 -60 0 -60', '-54 -60 54 -60 0 -6']
     const KEY_FRAME2 = ['-60 0 -60 0 -60 0', '-60 -54 -60 54 -6 0']
@@ -60,18 +63,18 @@ export default defineComponent({
 
     const createAnimations = () => {
       setTimeout(() => {
-        createAnimation(refs.shape1, { points: KEY_FRAME1[1] })
-        createAnimation(refs.shape2, { points: KEY_FRAME2[1] })
-        createAnimation(refs.shape3, { points: KEY_FRAME3[1] })
-        createAnimation(refs.shape4, { points: KEY_FRAME4[1] })
+        createAnimation(shape1.value, { points: KEY_FRAME1[1] })
+        createAnimation(shape2.value, { points: KEY_FRAME2[1] })
+        createAnimation(shape3.value, { points: KEY_FRAME3[1] })
+        createAnimation(shape4.value, { points: KEY_FRAME4[1] })
       }, 0)
     }
 
     const fadeAnimations = () => {
-      fadeAnimation(refs.shape1, { points:KEY_FRAME1[0] })
-      fadeAnimation(refs.shape2, { points:KEY_FRAME2[0] })
-      fadeAnimation(refs.shape3, { points:KEY_FRAME3[0] })
-      fadeAnimation(refs.shape4, { points:KEY_FRAME4[0] })
+      fadeAnimation(shape1.value, { points:KEY_FRAME1[0] })
+      fadeAnimation(shape2.value, { points:KEY_FRAME2[0] })
+      fadeAnimation(shape3.value, { points:KEY_FRAME3[0] })
+      fadeAnimation(shape4.value, { points:KEY_FRAME4[0] })
     }
 
     onMounted(() => {

app/components/shapes/HeadHorizontal.vue

@@ -44,21 +44,22 @@ export default defineComponent({
   },
   setup(props, setupContext) {
     const { createAnimation, fadeAnimation, transformPosition } = useAnimationParts()
-    const refs = setupContext.refs
+    const shape1 = ref()
+    const shape2 = ref()
 
     const transform = transformPosition(props)
 
 
     const createAnimations = () => {
       setTimeout(() => {
-        createAnimation(refs.shape1, { height: 55 })
-        createAnimation(refs.shape2, { y: 5, height: 55 })
+        createAnimation(shape1.value, { height: 55 })
+        createAnimation(shape2.value, { y: 5, height: 55 })
       }, 0)
     }
 
     const fadeAnimations = () => {
-      fadeAnimation(refs.shape1, { y: -60, height: 0 })
-      fadeAnimation(refs.shape1, { y: 60, height: 0 })
+      fadeAnimation(shape1.value, { y: -60, height: 0 })
+      fadeAnimation(shape2.value, { y: 60, height: 0 })
     }
 
     onMounted(() => {

app/components/shapes/HeadSlash.vue

@@ -39,7 +39,8 @@ export default defineComponent({
 
   setup(props, setupContext) {
     const { createAnimation, fadeAnimation, transformPosition } = useAnimationParts()
-    const refs = setupContext.refs
+    const shape1 = ref()
+    const shape2 = ref()
 
     const KEY_FRAME1 = ['-60 -60 -60 -60 -60 -60', '-60 -60 54 -60 -60 54']
     const KEY_FRAME2 = ['60 60 60 60 60 60', '60 60 -54 60 60 -54']
@@ -58,14 +59,14 @@ export default defineComponent({
 
     const createAnimations = () => {
       setTimeout(() => {
-        createAnimation(refs.shape1, { points: KEY_FRAME1[1] })
-        createAnimation(refs.shape2, { points: KEY_FRAME2[1] })
+        createAnimation(shape1.value, { points: KEY_FRAME1[1] })
+        createAnimation(shape2.value, { points: KEY_FRAME2[1] })
       }, 0)
     }
 
     const fadeAnimations = () => {
-      fadeAnimation(refs.shape1, { points: KEY_FRAME1[0] })
-      fadeAnimation(refs.shape2, { points: KEY_FRAME2[0] })
+      fadeAnimation(shape1.value, { points: KEY_FRAME1[0] })
+      fadeAnimation(shape2.value, { points: KEY_FRAME2[0] })
     }
 
     onMounted(() => {

app/components/shapes/HeadTriangle.vue

@@ -33,20 +33,20 @@ export default defineComponent({
 
   setup(props, setupContext) {
     const { createAnimation, fadeAnimation, transformPosition } = useAnimationParts()
-    const refs = setupContext.refs
+    const shape = ref()
 
     const KEY_FRAME = ['60 60 60 60 60 60', '60 60 -52 60 60 -52']
 
     const transform = transformPosition(props)
 
     const createAnimations = () => {
       setTimeout(() => {
-        createAnimation(refs.shape, { points: KEY_FRAME[1] })
+        createAnimation(shape.value, { points: KEY_FRAME[1] })
       }, 0)
     }
 
     const fadeAnimations = () => {
-      fadeAnimation(refs.shape, { points: KEY_FRAME[0] })
+      fadeAnimation(shape.value, { points: KEY_FRAME[0] })
     }
 
     onMounted(() => {