feat: 给气球添加动画效果

- 当气球返回的时候会出现突然放大，修复这个效果
- 气球旁边的手添加了过度效果

src/views/app/homeComponents/bolloon/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="home-right-container">
-    <div class="balloon animateJump" :class="{ shrink: isShrunk }" @click="handleClick">
+    <div class="balloon" :class="[isShrunk ? 'shrink' : 'shrinkFalse']" @click="handleClick">
       <div class="balloon-pointer"></div>
     </div>
   </div>
@@ -66,7 +66,9 @@ export default {
     }
 
     &.shrinkFalse {
-      animation: scales-1 1s forwards 1 ease-in-out;
+      animation:
+        scales-1 1s forwards 1 ease-in-out,
+        balloonJump 1s infinite 1s alternate;
     }
 
     &.shrink {
@@ -74,11 +76,14 @@ export default {
       margin-top: -100px;
 
       .balloon-pointer {
-        display: none;
+        // display: none;
+        opacity: 0;
       }
     }
 
     .balloon-pointer {
+      transition: all 0.5s ease-in-out;
+      opacity: 1;
       position: absolute;
       background-image: url('../../../../assets/images/rs/pointer.png');
       background-size: cover;
@@ -96,6 +101,7 @@ export default {
   from {
     transform: translateY(0) translateZ(0);
   }
+
   to {
     transform: translateY(-50px) translateZ(0);
   }
@@ -105,6 +111,7 @@ export default {
   from {
     transform: scale(1) translateZ(0);
   }
+
   to {
     transform: scale(0.6) translateZ(0);
   }
@@ -114,6 +121,7 @@ export default {
   from {
     transform: scale(0.6) translateZ(0);
   }
+
   to {
     transform: scale(1) translateZ(0);
   }