해결된 질문
작성
·
152
0
안녕하세요 재남님 강의 너무 잘듣고 있습니다
제가 지금 캐러셀 공부하면서 궁금한것이
캐러셀 각 이미지에 ref를 다 할당한다
슬라이드 이벤트 화살표 클릭시 이동할 인덱스를 계산하고 인덱스를 기준으로 current와 next의 ref를 가져온다
그럼 가져온 ref에 각각 애니메이션 클래스네임을 할당한다 애니메이션에 따라 translateX만큼 이동 , 마지막으로 이동한 인덱스 상태변화
이렇게 동작원리를 이해를 하였습니다 그래서 일단 animationend는 없어도 될거 같아서 일단 없애고 코드를 작성하니 화면 전환은 되는데 자연스러운 슬라이드가 아니라 그냥 뚝뚝끊기는 이미지 전환이 되고있습니다.. 제 생각엔 handleAnimationEnd함수는 애니메이션 동작완료후 동작하는것이라고 알고있는데 애니메이션이 동작을 안하는 이유를 모르겠습니다
const moveTo = useCallback(
(nextIndex: number, direction?: Direction) => {
const $current = itemsRef.current![currentIndex] as HTMLLIElement;
const $next = itemsRef.current![nextIndex] as HTMLLIElement;
if (nextIndex === currentIndex) return;
const dir = direction || (nextIndex > currentIndex ? "right" : "left");
// const handleAnimationEnd = () => {
// $current.className = cx("item");
// $next.className = cx("item", "current");
// $current.removeEventListener("animationend", handleAnimationEnd);
// setCurrentIndex(nextIndex);
// };
// $current.addEventListener("animationend", handleAnimationEnd);
$current.classList.add(cx(`${dir}_current`));
$next.classList.add(cx(`${dir}_next`));
setCurrentIndex(nextIndex);
},
[currentIndex]
);