diff --git a/docs/src/components/HomePage/index.js b/docs/src/components/HomePage/index.js index 0db6e29cd..4ddacb8dd 100644 --- a/docs/src/components/HomePage/index.js +++ b/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]); diff --git a/docs/src/components/HomePage/styles.module.css b/docs/src/components/HomePage/styles.module.css index 201d3969e..a265c23d5 100644 --- a/docs/src/components/HomePage/styles.module.css +++ b/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;