[JavaScript] transitionend

버튼을 클릭하는 경우 transform: scale(1.1);스타일 속성을 제어하는 playing클래스를 추가하는 코드를 구현해보았다.

문제는 일정 크기로 버튼의 크기가 커진 후 playing클래스가 그대로 남아있어 버튼의 크기 원래대로 돌아오지 않는 다는 점이다.

이 문제를 해결하는데 transitionend이벤트를 사용할 수 있었다.

transitionedn이벤트란?
transitionend 이벤트는 CSS transition 이 완료되면 발생한다. transition 속성이 제거되거나 display가 none으로 설정된 경우와 같이 완료 전에 transition이 제거된 경우에는 이벤트가 생성되지 않는다.

  const onTransitionEnd = (e) => {
    if(e.propertyName==='transform') {
      e.target.classList.remove('playing')
    }
  }
  
    const init = () => {
    window.addEventListener('keydown', onKeyDown)
    keys.forEach((key, index) => {
      const audio = getAudioElement(index)
      key.appendChild(audio)
      key.dataset.key = drumSounds[index].key
      key.addEventListener('click', onmousedown)
      key.addEventListener('transitionend', onTransitionEnd)
    });
  }
    
    init()