[HTML&DOM]CSS3 transition, animate 완료된 후 이벤트 호출

개요

CSS3에서는 transition, animate 속성을 부여하여 애니메이션 효과를 줄 수 있습니다.
이벤트 리스너에 이벤트를 등록함으로써 transition, animate 애니메이션 효과가 완료된 후 이벤트를 호출할 수 있습니다.

TransitionEnd

transitionend는 transition 효과가 완료된 후 이벤트를 발생시킵니다.

사용법

이벤트 리스너에 transitionend를 등록하여 사용할 수 있습니다.

const dom = document.getElementById('dom');
dom.addEventListener('transitionend', function() {
  console.debug('transitoinend');
});

각 브라우저별 prefix를 붙여서 사용할 수 있습니다.

function whichTransitionEvent(){
  const el = document.createElement('fakeelement');
  const transitions = {
    'transition'      : 'transitionend',
    'OTransition'     : 'oTransitionEnd',
    'MozTransition'   : 'transitionend',
    'WebkitTransition': 'webkitTransitionEnd'
  };

  for (const t in transitions) {
    if (el.style[t] !== undefined){
      return transitions[t];
    }
  }
}

const dom = document.getElementById('dom');
dom.addEventListener(whichTransitionEvent(), function() {
  console.debug('transitoinend');
});

예제

See the Pen TransitionEnd Event by HanDongHee (@oper0116) on CodePen.

AnimationEnd

animationend는 animate 효과가 완료된 후 이벤트를 발생시킵니다.

사용법

이벤트 리스너에 animationend를 등록하여 사용할 수 있습니다.

const dom = document.getElementById('dom');
dom.addEventListener('animationend', function() {
  console.debug('animationend');
});

각 브라우저별 prefix를 붙여서 사용할 수 있습니다.

function whichAnimationEvent(){
  const el = document.createElement('fakeelement');
  const animations = {
    'animation'      : 'animationend',
    'OAnimation'     : 'oAnimationEnd',
    'MozAnimation'   : 'animationend',
    'WebkitAnimation': 'webkitAnimationEnd'
  };

  for (const t in animations) {
    if (el.style[t] !== undefined){
      return animations[t];
    }
  }
}

const dom = document.getElementById('dom');
dom.addEventListener(whichAnimationEvent(), function() {
  console.debug('animationend');
});

예제

See the Pen AnimationEnd Event by HanDongHee (@oper0116) on CodePen.

참고자료

(MDN Web Docs: transitionend_event)[https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event]
(MDN Web Docs: animationend_event)[https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event]