[JS] Transition Event

왜 볼의 위치가 e.client 값과 다를까?!

클릭시 e.clientX, e.clientY값을 따라오도록 했음. 그치만 마우스보다 조금 더 bottom + right에 있음.

마진이 있기 때문...reset.css로 마진 안 지워서

해결방식 2. position absolute

또, 마우스 커서를 센터에 위치시키려면 -15px씩 해줘야 됨

.ball {
    position: absolute;
    left: 0;
    top: 0;
    margin: -15px 0 0 -15px;
}

또는

window.addEventListener('click', function (e) {
    ballElm.style.transform = `translate(${e.clientX - 15}px, ${e.clientY - 15}px)`;
});

---

transitionend 이벤트

트랜지션 끝났을 때

e.elapsedTime

transition이 재생되는데 얼마나 시간이 경과했냐

즉, transition-duration 속성값이 나옴

e.propertyName

ballElm.addEventListener('transitionend', function (e) {
    ballElm.classList.add('end');
    console.log(e.elapsedTime); // 2, 2
    console.log(e.propertyName); // transform, bg-color
});

---

transitionstart 이벤트

ballElm.addEventListener('transitionstart', function (e) {
    ballElm.classList.add('end');
    console.log(e.elapsedTime); // 0, 0
    console.log(e.propertyName); // transform, bg-color
});