monoid/ionian
1
0
Fork 0
Code Issues 9 Pull Requests Projects Releases Wiki Activity

threshold 0

Browse Source
This commit is contained in:
monoid 2024-04-07 17:58:05 +09:00
parent 4cf1381faa
commit a9e646dd81
1 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/client/src/components/gallery/LazyImage.tsx
View File

@ -6,20 +6,21 @@ export function LazyImage({ src, alt, className }: { src: string; alt: string; c
useEffect(() => { useEffect(() => {
if (ref.current) { if (ref.current) {
let toggle = false;
const observer = new IntersectionObserver((entries) => { const observer = new IntersectionObserver((entries) => {
if (entries.some(x => x.isIntersecting)) { if (entries.some(x => x.isIntersecting)) {
setLoaded(true); setLoaded(true);
toggle = !toggle; ref.current?.animate([
ref.current?.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 500, easing: "ease-in-out" }); { opacity: 0 },
{ opacity: 1 }
], {
duration: 300,
easing: "ease-in-out"
});
observer.disconnect(); observer.disconnect();
} }
else { }, {
if (toggle) { rootMargin: "200px",
console.log("fade out"); threshold: 0
ref.current?.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 500, easing: "ease-in-out" });
}
}
}); });
observer.observe(ref.current); observer.observe(ref.current);
return () => { return () => {