fix:动画修改

src/components/TheNoticeBar/index.tsx

@@ -1,6 +1,14 @@
-import { defineComponent, onMounted, reactive, ref, watch } from 'vue';
+import { defineComponent, reactive, ref, watch } from 'vue';
 import styles from './index.module.less';
 
+const refAnimation = (callback: any) => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      callback();
+    });
+  });
+};
+
 export default defineComponent({
   name: 'TheNoticeBar',
   props: {
@@ -46,11 +54,7 @@ export default defineComponent({
       notiData.time = setTimeout(() => {
         notiData.contentStyle.transitionDuration = '0s';
         notiData.contentStyle.transform = `translateX(${notiData.wrapWidth}px)`;
-        requestAnimationFrame(() => {
-          requestAnimationFrame(() => {
-            startAnimate();
-          });
-        });
+        refAnimation(startAnimate);
       }, 5 * 1000);
     };
     const stopAnimate = () => {
@@ -63,11 +67,10 @@ export default defineComponent({
     watch(
       () => props.isAnimation,
       val => {
-        console.log(props.isAnimation, 'animation');
         if (val) {
-          init();
+          refAnimation(init);
         } else {
-          stopAnimate();
+          refAnimation(stopAnimate);
         }
       }
     );
@@ -75,8 +78,8 @@ export default defineComponent({
       <div
         ref={wrapRef}
         class={[styles.wrap, props.isAnimation ? styles.isAnitaion : '']}
-        onMouseenter={() => init()}
-        onMouseleave={() => stopAnimate()}>
+        onMouseenter={() =>  !props.isAnimation && init()}
+        onMouseleave={() => !props.isAnimation && stopAnimate()}>
         <div
           ref={contentRef}
           style={notiData.contentStyle}