css animation 이 중지되었을때 자바스크립트에서 탐지해내는 방법이다.
getTransitionEndEventName 은 브라우저별로 이벤트명이 달라서 해당 이벤트명을 찾아내는 함수이다.
[code]
function getTransitionEndEventName() {
const transitions = {
transition: ‘transitionend’,
OTransition: ‘oTransitionEnd’,
MozTransition: ‘transitionend’,
WebkitTransition: ‘webkitTransitionEnd’,
}
const bodyStyle = document.body.style
for (const transition in transitions) {
if (bodyStyle[transition] !== undefined) {
return transitions[transition]
}
}
}
var el = document.querySelector(‘#ani’);
el.addEventListener(this.getTransitionEndEventName(), () => {
console.log(‘Animation Stoped!’)
})
[/code]