[CSS] transitionend Event

transitionend Event란?

• transition이 완료된 이후에 발생하는 이벤트, transition 완료를 감지한다.
• transition과 함께 사용하는 함수
• addEventListener를 사용하여 이벤트 모니터링 가능

예제

• testDiv 의 콘텐츠에 마우스를 hover했을 때 2초 동안 원래 크기보다 1.1배 커지게 만든다.(transition)
• transition이 끝나면 이를 감지하고 "이것은 테스트 텍스트입니다.." 라는 텍스트가 보이도록 한다.(transitionend)

    .testDiv {
        transition: 2s;
    }

    .testDiv:hover {
        transform: scale(1.1);
    }

    const test = document.querySelector(.testDiv);

    test.addEventListener("transitionend", addText);

    const addText = () => {
        test.innerHTML = "이것은 테스트 텍스트입니다..";
    }

Reference

http://blim.co.kr/archives/138

https://www.w3schools.com/jsref/event_transitionend.asp