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

CSS Animations 종료 시 작업 처리하기

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

구문

animationstart 애니메이션 시작 시 이벤트
animationiteration 애니메이션 반복 발생 시 이벤트
animationend 애니메이션 종료 시 이벤트

설명

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

실습

index.html

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

---

style.css

body {
  background-color: #000;
  color: #fff;
}

.rect {
  display: block;
  background-size: contain;
  width: 100px;
  height: 100px;
  background-image: url('loading.svg');
}

.rect.state-show {
  animation: infinite 1s rotate linear;
}

.button {
  margin: 20px 0 0 0;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

---

script.js

document.querySelector('button').addEventListener('click', (event) => {
  const element = document.querySelector('.rect');
  if (element.classList.contains('state-show') === true) {
    element.classList.remove('state-show');
  } else {
    element.classList.add('state-show');
  }
});

const targetEl = document.querySelector('.rect');
targetEl.addEventListener('animationstart', (event) => {
  // 애니메이션 시작 시 발생 이벤트
  document.querySelector('.log').innerHTML = 'animationstart 발생 : ' + new Date().toLocaleTimeString();
  console.log(document.querySelector('.log').innerHTML);
});

targetEl.addEventListener('animationiteration', (event) => {
  // 애니메이션 반복 발생 시 이벤트
  // 반복 미지정 시 발생하지 않음
  document.querySelector('.log').innerHTML = 'animationiteration 발생 : ' + new Date().toLocaleTimeString();
  console.log(document.querySelector('.log').innerHTML);
});

targetEl.addEventListener('animationend', (event) => {
  // 애니메이션 종료 시 발생 이벤트
  // 반복 지정 시 발생하지 않음
  document.querySelector('.log').innerHTML = 'animationend 발생 : ' + new Date().toLocaleTimeString();
  console.log(document.querySelector('.log').innerHTML);
});