CSS transition 완료 후 이벤트 처리

움직이는 UI 동작에는 jQuery 에서 제공하는 animate()와 같은 메소드를 자주 쓰게 되지만

웹,모바일을 막론하고 퍼포먼스 측면에선 CSS 애니메니션 속성이 조금 더 유리할 수 밖에 없습니다.

그래서 디바이스,브라우저 호환성을 고려한 CSS의 transition과 같은 애니메니션 속성을 선호하는데

여기서 CSS transition 애니메이션의 종료 시점(콜백)에 이벤트가 실행되어야 할 경우,

구글링해보면 벤더별로 지원 가능한 jQuery 함수를 만날 수 있습니다.

transition 속성의 종료 시점을 체크해 콜백하는 함수입니다.

https://gist.github.com/ifthenelse/5433230

// addClass CSS 트랜지션 효과 후 실행 함수
function whichTransitionEvent(){
    var t,
    el = document.createElement("fakeelement");

    var transitions = {
        "transition"      : "transitionend",
        "OTransition"     : "oTransitionEnd",
        "MozTransition"   : "transitionend",
        "WebkitTransition": "webkitTransitionEnd"
    }

    for (t in transitions){
        if (el.style[t] !== undefined){
            return transitions[t];
        }
    }
}

// 이벤트 사용
var transitionEvent = whichTransitionEvent();

$('div').addClass('on);
$('div').one('transitionEvent', function(event){
    //-- 실행 코드
});

물론,

CSS3의 transition & transform 애니메이션 속성을 지원하는 아래 jQuery 플러그인도 있습니다만

Transit

http://ricostacruz.com/jquery.transit/

업데이트가 1년 동안 없다는 점. 

CSS3 애니메이션은 jQuery 컨트롤이 많지 않으니 UI,UX 동작을 구상하고 직접 스타일링해 구현하면 많은 도움이 되더군요. 

자주 구현해보고 내 기억에 담는 것이 숙제일 뿐이지요.