인프런 커뮤니티 질문&답변

안녕하세요 재남님 강의 너무 잘듣고 있습니다

제가 지금 캐러셀 공부하면서 궁금한것이

1. 캐러셀 각 이미지에 ref를 다 할당한다

2. 슬라이드 이벤트 화살표 클릭시 이동할 인덱스를 계산하고 인덱스를 기준으로 current와 next의 ref를 가져온다

3. 그럼 가져온 ref에 각각 애니메이션 클래스네임을 할당한다 애니메이션에 따라 translateX만큼 이동 , 마지막으로 이동한 인덱스 상태변화

4. 이렇게 동작원리를 이해를 하였습니다 그래서 일단 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]
  );