feat: docs add dynamic effect for submodules on home

docs/src/components/HomePage/index.js

@@ -25,7 +25,7 @@ export default ({ currentLocale }) => {
     const observerOptions = {
       root: null,
       rootMargin: '0px',
-      threshold: 0.5
+      threshold: 0.2
     };
 
     const observer = new IntersectionObserver((entries) => {
@@ -63,6 +63,67 @@ export default ({ currentLocale }) => {
     };
   }, []);
 
+  useEffect(() => {
+    const childObserverOptions = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0.1
+    };
+
+    const childObserver = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          const index = parseInt(entry.target.dataset.index);
+          entry.target.style.transitionDelay = `${index * 0.15}s`;
+          entry.target.classList.add(styles.childVisible);
+        }
+      });
+    }, childObserverOptions);
+
+    // 监听.images模块的子元素
+    const aboutImages = aboutRef.current?.querySelectorAll(`.${styles.images} .${styles.sub}`);
+    aboutImages?.forEach((element, index) => {
+      element.dataset.index = index;
+      childObserver.observe(element);
+    });
+
+    // 监听.features模块的子元素
+    const featuresCards = featuresRef.current?.querySelectorAll(`.${styles.card}`);
+    featuresCards?.forEach((element, index) => {
+      element.dataset.index = index;
+      childObserver.observe(element);
+    });
+
+    // 监听.opensource模块的统计项
+    const opensourceStats = opensourceRef.current?.querySelectorAll(`.${styles.statItem}`);
+    opensourceStats?.forEach((element, index) => {
+      element.dataset.index = index;
+      childObserver.observe(element);
+    });
+
+    // 监听.community模块的子元素
+    const communityElements = communityRef.current?.querySelectorAll(`.${styles.content} > div`);
+    communityElements?.forEach((element, index) => {
+      element.dataset.index = index;
+      childObserver.observe(element);
+    });
+
+    // 监听.rock模块的子元素
+    const rockElements = document.querySelector(`.${styles.rock}`)?.children;
+    Array.from(rockElements || []).forEach((element, index) => {
+      element.dataset.index = index;
+      childObserver.observe(element);
+    });
+
+    return () => {
+      aboutImages?.forEach(element => childObserver.unobserve(element));
+      featuresCards?.forEach(element => childObserver.unobserve(element));
+      opensourceStats?.forEach(element => childObserver.unobserve(element));
+      communityElements?.forEach(element => childObserver.unobserve(element));
+      Array.from(rockElements || []).forEach(element => childObserver.unobserve(element));
+    };
+  }, []);
+
   useEffect(() => {
     fetch('/ROCK/stats.json').then(res => res.json()).then(data => {
       setTodayStat(data[today]);

docs/src/components/HomePage/styles.module.css

@@ -149,6 +149,25 @@
     opacity: 1;
     transform: translateY(0);
   }
+
+  /* 子元素滚动动画 */
+  .images .sub,
+  .features .card,
+  .opensource .statItem,
+  .community .content > div,
+  .rock > * {
+    opacity: 0;
+    transform: translateY(40px);
+    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+  }
+  .images .sub.childVisible,
+  .features .card.childVisible,
+  .opensource .statItem.childVisible,
+  .community .content > div.childVisible,
+  .rock > *.childVisible {
+    opacity: 1;
+    transform: translateY(0);
+  }
   .features {
     .cards {
       margin-top: 80px;