Javascript Transition Event 제어

자바스크립트를 통해 CSS 애니메이션을 제어하는 방법에 대해 알아보자.

먼저 다음과 같은 엘리먼트가 있다고 생각해 보자.

<style>
.box{
    width:30px;
    height:30px;
    background:salmon;
    position:absolute;
    left:0;
    top:0;
    transition:1s;
}
</style>

<div class="box"></div>

아래 e.clientX 와 e.cilentY에는 현재 클릭한 윈도우 상의 좌표값을 반환한다.

const box= document.querySelector('box');

window.addEventListener("click, function(e){
    console.log(e.clientX, e.clientY);

    box.style.transform = 'translate(' +e.clientX + 'px,' + e.clientY + 'px)';
});

여기서 만약 box를 position:absolute로 띄우지 않으면 이 window가 가지는 마진값에 영향을 받기 때문에, 정확히 내가 클릭한 정확한 위치로 공이 움직이지 않는다.

reset css를 사용하거나 position: absolute를 사용하자.

그럼에도 불구하고 엘리먼트의 기준값은 왼쪽 위가 기본이기 때문에 이를 가운데 정렬을 할 방법이 필요하다.

• 요소에 margin을 요소가 가지는 높이와 너비의 절반을 준다. (-15px)
• e.clientX와 Y에 요소의 너비와 높이 값의 절반만큼 준다.

transitionend는 트랜지션 이벤트가 끝났을 때 동작하는 이벤트이다. 이와 반대인 transitionstart가 있는데 잘 안써서 넘어감.

위 코드에 다음 코드들을 추가한다.

.box.end{
    background:tan;    
}

box.addEventListener('transitionend', function(e){
    box.classList.add('end');
    console.log(e.e.apsedTime); // transition delay time이 찍힌다.
})