[책] 자바스크립트 코드 레시피 278 - 161일차

CSS Transition 종료 시 작업 처리하기

• 모션 실행 후 처리를 추가하고 싶을 때

구문

transitionend transition 완료 시 이벤트

설명

요소의 다음 이벤트를 감시하면 애니메이션 종료를 확인할 수 있습니다. transitionend 이벤트는 CSS Transitions를 감시하며, 해당 이벤트가 완료되면 transitionend 이벤트가 발생합니다.

실습

index.html

<div class="rect"></div>
<button class="button">버튼</button>

---

style.css

.rect {
  width: 100px;
  height: 200px;
  background-color: #8a2be2;
  transition: width 0.5s ease;
}

.rect.state-show {
  width: 1000px;
}

---

script.js

const button = document.querySelector('.button');
button.addEventListener('click', handleClick);
function handleClick() {
  const element = document.querySelector('.rect');
  if (element.classList.contains('state-show') === false) {
    element.classList.add('state-show');
    // console.log('ok');
  } else {
    element.classList.remove('state-show');
    // console.log('no');
  }
  element.addEventListener('transitionend', (event) => {
    console.log('애니메이션 끝난 후 실행');
  });
}