animation, transition event

🎨 Animation 이벤트

https://developer.mozilla.org/en-US/docs/Web/API/Element/animationend_event

CSS 애니메이션이 시작, 종료, 반복될 때 발생하는 이벤트이다.

• animationstart
• animationend
• animationiteration

// react
export default function EventPage() {
  const animationStart = () => console.log('animation start');
  const animationEnd = () => console.log('animation end');
  const animationIteration = () => console.log('animation iteration');

  return (
    <div>
      <h3>animation event</h3>
      <div
        className={styles.box}
        onAnimationStart={animationStart}
        onAnimationEnd={animationEnd}
        onAnimationIteration={animationIteration}
      ></div>
    </div>
  );
}

// css
.box {
  width: 100px;
  height: 100px;
  background-color: #5f9ea0;
  animation: spin 2s;
  animation-iteration-count: 3;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

 

 

🎨 Transtion 이벤트

https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event

CSS 트랜지션이 시작, 종료, 취소될 때 발생하는 이벤트이다.

• transtionstart
• transitionend
• transitioncancel

// react
// transitionEnd 이벤트 외 지원하지 않는 이벤트는 직접 등록해야 한다.
export default function EventPage() {
  const divRef = useRef<HTMLDivElement>(null);
  const transitionStart = () => console.log('transition start');
  const transitionEnd = () => console.log('transition end');
  const transitionCancel = () => console.log('transition cancel');

  useEffect(() => {
    const divElement = divRef.current;
    if (!divElement) return;
    divElement.addEventListener('transitionstart', transitionStart);
    divElement.addEventListener('transitioncancel', transitionCancel);

    return () => {
      divElement.removeEventListener('transitionstart', transitionStart);
      divElement.removeEventListener('transitioncancel', transitionCancel);
    };
  }, []);

  return (
    <div>
      <h3>animation event</h3>
      <div
        className={styles.box2}
        ref={divRef}
        onTransitionEnd={transitionEnd}
      ></div>
    </div>
  );
}

// CSS
.box2 {
  width: 100px;
  height: 100px;
  background-color: #5f9ea0;
  transition: transform 2s ease;
}

.box2:hover {
  transform: scaleX(2);
}