Javascript/GMA(2302~)

230607 자바스크립트 animationstart / animationiteration 이벤트

hyerin1201 2023. 6. 7. 16:18

Html

<body class="chapter-10">

  <main class="centering">
    <div class="rect">
    </div>

    <div class="ui">
      <label>
        <input type="checkbox" id="checkbox"/>
        애니메이션 확인
      </label>

      <div class="log">로그 표시 영역</div>
    </div>
  </main>

</body>

 

Javascript

document.querySelector("#checkbox").addEventListener("change", () => {
  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", (e) => {
  document.querySelector(".log").innerHTML = `animaition 발생 : `+ new Date().toLocaleTimeString();
});
targetEl.addEventListener("animationiteration", (e) => {
  document.querySelector(".log").innerHTML = `animationiteration 발생 : ` + new Date().toLocaleTimeString();
})