움직이는 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 플러그인도 있습니다만
http://ricostacruz.com/jquery.transit/
업데이트가 1년 동안 없다는 점.
CSS3 애니메이션은 jQuery 컨트롤이 많지 않으니 UI,UX 동작을 구상하고 직접 스타일링해 구현하면 많은 도움이 되더군요.
자주 구현해보고 내 기억에 담는 것이 숙제일 뿐이지요.