HTML DOM TransitionEvent 객체 완벽 정리 – 주요 속성과 실전 예제

HTML DOM TransitionEvent 객체는 CSS 트랜지션(transition)이 진행되는 동안 발생하는 이벤트를 나타내는 객체입니다. 요소의 스타일이 부드럽게 변화하는 과정에서 트리거되는 다양한 정보를 담고 있어, 트랜지션의 상태를 자바스크립트로 제어하거나 모니터링할 때 유용하게 사용됩니다.

TransitionEvent의 주요 속성

TransitionEvent 객체는 다음과 같은 속성들을 제공합니다.

속성	설명
propertyName	트랜지션 이벤트가 발생했을 때, 전환 대상이 된 CSS 속성의 이름을 문자열로 반환합니다.
elapsedTime	트랜지션 이벤트가 발생한 시점까지 트랜지션이 실행된 시간을 초 단위의 숫자로 반환합니다.
pseudoElement	트랜지션이 적용된 의사 요소(pseudo-element)의 이름을 반환합니다. 의사 요소가 아닌 경우 빈 문자열('')을 반환합니다.

TransitionEvent가 발생하는 이벤트 종류

TransitionEvent는 주로 다음 세 가지 시점에서 발생합니다.

transitionrun – 트랜지션이 생성될 때 발생합니다.
transitionstart – 트랜지션이 실제로 시작될 때 발생합니다.
transitionend – 트랜지션이 완료되었을 때 발생합니다.

예제: elapsedTime 속성 활용하기

다음 예제는 TransitionEvent의 elapsedTime 속성을 사용하여, 트랜지션이 완료된 시점에 경과 시간을 화면에 출력하는 코드입니다.

<!DOCTYPE html>
<html>
<head>
<title>TransitionEvent elapsedTime</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
    #playArea {
        display: inline-block;
        border-radius: 50%;
        background-color: #DC3545;
        width: 50px;
        height: 50px;
        border: 3px solid #AC3509;
        transition: all 1.3s ease;
    }
    #playArea:hover {
        transform:translateX(80px);
    }
</style>
</head>
<body>
    <form>
        <fieldset>
            <legend>TransitionEvent-elapsedTime</legend>
            <div id="playArea"></div>
            <div id="divDisplay"></div>
        </fieldset>
    </form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var playDisplay = document.getElementById("playArea");
    function getElapsedTime(event) {
        divDisplay.textContent = 'Elapsed Time in Transition: '+event.elapsedTime+' seconds';
    }
    playDisplay.addEventListener("transitionend", getElapsedTime);
</script>
</body>
</html>

코드 설명

빨간색 원형 div(#playArea)에 마우스를 올리면(hover) translateX(80px) 효과로 오른쪽으로 80px 이동하며, 이동에는 1.3초의 트랜지션이 적용됩니다.
addEventListener("transitionend", ...)를 통해 트랜지션이 끝나는 시점에 getElapsedTime 함수가 호출됩니다.
함수 내부에서 event.elapsedTime 값을 읽어 트랜지션에 걸린 총 시간을 화면에 표시합니다.

실행 결과

div 요소에 마우스를 올리기 전 −

HTML DOM TransitionEvent 객체 완벽 정리 – 주요 속성과 실전 예제

div 요소에 마우스를 올린 후 −

HTML DOM TransitionEvent 객체 완벽 정리 – 주요 속성과 실전 예제

트랜지션이 완료되면 설정된 지속 시간인 약 1.3초가 elapsedTime 값으로 출력되는 것을 확인할 수 있습니다. 이처럼 TransitionEvent 객체를 활용하면 CSS 트랜지션의 진행 상황을 정밀하게 추적하고, 애니메이션 완료 후 추가 동작을 실행하는 등의 인터랙션을 쉽게 구현할 수 있습니다.