(incubator-answer) branch feat/1.4.1/badge-style updated: fix: Optimize badge animation effect

[shuai]

This is an automated email from the ASF dual-hosted git repository.

shuai pushed a commit to branch feat/1.4.1/badge-style
in repository https://gitbox.apache.org/repos/asf/incubator-answer.git


The following commit(s) were added to refs/heads/feat/1.4.1/badge-style by this 
push:
     new 270feec5 fix: Optimize badge animation effect
270feec5 is described below

commit 270feec5a51f13cb5eeee5344a9928bf1def1474
Author: shuai <lishuail...@sifou.com>
AuthorDate: Wed Oct 9 16:30:42 2024 +0800

    fix: Optimize badge animation effect
---
 ui/src/components/Modal/BadgeModal.tsx | 43 +++++++++++++++++++++++++++-------
 ui/src/utils/animateGift.ts            |  4 +++-
 2 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/ui/src/components/Modal/BadgeModal.tsx 
b/ui/src/components/Modal/BadgeModal.tsx
index c0cf4cc3..9c77e9d4 100644
--- 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,7 +84,7 @@ const BadgeModal: FC<BadgeModalProps> = ({ badge, visible }) 
=> {
 
       timeout = setTimeout(() => {
         bg2 = new AnimateGift({
-          elm: paranetNode,
+          elm: parentNode,
           width: window.innerWidth,
           height: window.innerHeight,
           length: LENGTH,
@@ -96,6 +92,35 @@ const BadgeModal: FC<BadgeModalProps> = ({ badge, visible }) 
=> {
         });
       }, 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
index c53b2f76..70137eca 100644
--- 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);
+    }
   }
 }