애니메이션 질문

[송형진]

강의에 없는 내용을 질문해서 죄송합니다.
개인 프로젝트를 진행중인데, intersection observer 를 써서 화면에 보이면 애니메이션을 진행하는데, 
예를들어, 여러개의 div에 startAni, endAni 라는 css 스타일을 div태그 뒤에 붙혀서 진행하는 형식입니다. Ex_ (startAni : opacity: 0 , endAni : opacity: 1, transiition..)
이제 endAni는 useState에 넣어서 붙혔다 뗐다 하는데, (형식은 멋있게 컴포넌트 전환 애니메이션 주는 법(transition) 부분과 똑같습니다.)
문제는 스크롤을 빠르게 내릴 시 startAni는 잘 붙는데, endAni가 잘 안붙어서 div태그들이 보이지가 않는겁니다. (opacity : 0)
그러니까, 스크롤을 천천히 하면, startAni endAni 다 붙어서 애니메이션이 잘 먹지만, 스크롤을 빠르게 내릴 시 endAni가 스크롤이 느려질 때 쯤 붙습니다.
혹시 이유와 해결방안을 알 수 있을까요 선생님 ?

[codingapple]

빠르게 내리면 스크롤 위치측정이 안되어서 그럴 수도 있습니다 
스크롤위치 측정하는 코드를 살펴봅시다

[송형진]

아 해결되었습니다. 제가 setTimeout 시간을 너무 길게줘서 생긴 문제였습니다.
답변해 주셔서 감사합니다.

[글쓴이]

글