Kaynağa Gözat

[doc] 优化Clis组件的动画逻辑,添加页面可见性变化时的处理,确保动画在页面隐藏时停止。

dufu1991 1 yıl önce
ebeveyn
işleme
ee4d7a6a6c
1 değiştirilmiş dosya ile 14 ekleme ve 3 silme
  1. 14 3
      docs/site/src/lib/clis/Clis.svelte

+ 14 - 3
docs/site/src/lib/clis/Clis.svelte

@@ -26,10 +26,10 @@
 			}
 		}, speed);
 	};
-
-	// 每 3 秒切换一次
-	onMount(() => {
+	// 动画
+	const animationFun = () => {
 		typeWriter(randomCodeGroupSvgData[showCli].cli);
+		// 每 3 秒切换一次
 		intervalTime = setInterval(() => {
 			if (showCli === codeGroupSvgData.length - 1) {
 				showCli = 0;
@@ -41,6 +41,17 @@
 				typeWriter(randomCodeGroupSvgData[showCli].cli);
 			}, 300);
 		}, 6000);
+	};
+	onMount(() => {
+		animationFun();
+		window.addEventListener('visibilitychange', () => {
+			if (document.visibilityState === 'hidden') {
+				clearInterval(intervalTime);
+				clearInterval(times);
+			} else {
+				animationFun();
+			}
+		});
 	});
 	onDestroy(() => {
 		clearInterval(intervalTime);