css 애니메이션이 종료되었는지 체크 > IT 기술백서

css animation 이 중지되었을때 자바스크립트에서 탐지해내는 방법이다.

getTransitionEndEventName 은 브라우저별로 이벤트명이 달라서 해당 이벤트명을 찾아내는 함수이다.

[code]

function getTransitionEndEventName() {

  const transitions = {

    transition: 'transitionend',

    OTransition: 'oTransitionEnd',

    MozTransition: 'transitionend',

    WebkitTransition: 'webkitTransitionEnd',

  }

  const bodyStyle = document.body.style

  for (const transition in transitions) {

    if (bodyStyle[transition] !== undefined) {

      return transitions[transition]

    }

  }

}

var el = document.querySelector('#ani');

el.addEventListener(this.getTransitionEndEventName(), () => {

  console.log('Animation Stoped!')

}) 

[/code]