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(() => {
if (ref.current) {
let toggle = false;
const observer = new IntersectionObserver((entries) => {
if (entries.some(x => x.isIntersecting)) {
setLoaded(true);
toggle = !toggle;
ref.current?.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 500, easing: "ease-in-out" });
ref.current?.animate([
{ opacity: 0 },
{ opacity: 1 }
], {
duration: 300,
easing: "ease-in-out"
});
observer.disconnect();
}
else {
if (toggle) {
console.log("fade out");
ref.current?.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 500, easing: "ease-in-out" });
}
}
}, {
rootMargin: "200px",
threshold: 0
});
observer.observe(ref.current);
return () => {