fix: Optimize badge animation effect

apache · Oct 9, 2024 · 88b52d8 · 88b52d8
1 parent 0cff10b
commit 88b52d8
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 10 deletions.
diff --git a/ui/src/components/Modal/BadgeModal.tsx b/ui/src/components/Modal/BadgeModal.tsx
@@ -66,19 +66,15 @@ const BadgeModal: FC<BadgeModalProps> = ({ badge, visible }) => {
     navigate(url);
   };
 
-  useEffect(() => {
+  const initAnimation = () => {
     const DURATION = 8000;
     const LENGTH = 200;
     const bgNode = document.documentElement || document.body;
+    const parentNode = document.getElementById('badgeModal')?.parentNode;
 
-    if (visible) {
-      const badgeModalNode = document.getElementById('badgeModal');
-      const paranetNode = badgeModalNode?.parentNode;
-
-      badgeModalNode?.setAttribute('style', 'z-index: 1');
-
+    if (parentNode) {
       bg1 = new AnimateGift({
-        elm: paranetNode,
+        elm: parentNode,
         width: bgNode.clientWidth,
         height: bgNode.clientHeight,
         length: LENGTH,
@@ -88,14 +84,43 @@ const BadgeModal: FC<BadgeModalProps> = ({ badge, visible }) => {
 
       timeout = setTimeout(() => {
         bg2 = new AnimateGift({
-          elm: paranetNode,
+          elm: parentNode,
           width: window.innerWidth,
           height: window.innerHeight,
           length: LENGTH,
           duration: DURATION,
         });
       }, DURATION / 2);
     }
+  };
+
+  const destroyAnimation = () => {
+    console.log('destroyAnimation');
+    clearTimeout(timeout);
+    bg1?.destroy();
+    bg2?.destroy();
+  };
+
+  useEffect(() => {
+    if (visible) {
+      initAnimation();
+    } else {
+      destroyAnimation();
+    }
+
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'visible') {
+        initAnimation();
+      } else {
+        destroyAnimation();
+      }
+    };
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+      destroyAnimation();
+    };
   }, [visible]);
 
   return (

diff --git a/ui/src/utils/animateGift.ts b/ui/src/utils/animateGift.ts
@@ -178,6 +178,8 @@ export default class Confetti {
   }
 
   destroy() {
-    this.parent.removeChild(this.canvas);
+    if (this.parent.contains(this.canvas)) {
+      this.parent.removeChild(this.canvas);
+    }
   }
 }