[JavaScript] 자바스크립트 CSS Animations 종료시 작업 처리하기

175_자바스크립트 CSS Animations 종료시 작업 처리하기

[적용]

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

---

[문법]

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

---

[내용]

요소의 다음 이벤트를 감시하면 애니메이션 종료를 확인할 수 있다.

animationstart, animationiteration, animationend 이벤트는 CSS Animations 을 감시하며,

해당 이벤트가 완료되면 animationstart 이벤트가 발생한다.

 

CSS                                                                                                                                                                      style.css

.rect {
  ...생략...
  width: 100px;
  height: 100px;
  background: url('images/loading.svg');
}

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

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

JavaScript                                                                                                                                                          main.js

const targetEl = document.querySelector('.rect');
targetEl.addEventListener('animationstart', (event) => {
  // 애니메이션 시작 시 발생 이벤트
});
targetEl.addEventListener('animationiteration', (event) => {
  // 애니메이션 반복 발생 시 이벤트
  // 반복 미지정시 발생하지 않음.
});
targetEl.addEventListener('animationend', (event) => {
  // 애니메이션 종료 시 발생 이벤트
  // 반복 지정 시 발생하지 않음
});

 

실행결과

 

내용

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김