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

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

[적용]

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

---

[문법]

이벤트	의미
transitionend	transition 완료 시 이벤트

---

[내용]

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

transitionend 이벤트는 CSS Transitions 를 감시하며, 해당 이벤트가 완료되면 transitionend 이벤트가 발생한다.

 

CSS                                                                                                                                                                      style.css

.rect {
  ...생략...
  width: 100px;
  transition: all 2s;
}

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

JavaScript                                                                                                                                                          main.js

const element = document.querySelect('.rect');
element.addEventListener('transitionend', (event) => {
  // 애니메이션 완료 시점의 처리 코드
});

 

---

 

 

 

 

 

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