html5] CSS3 transition and jQuery transitionend handler

미래웹은 상당히 진보된 인터페이스를 제공합니다
페이지의 에니메이션을 담당하게되는 transition 을 알아보도록 하죠

먼저 스타일정의를 해주어야 합니다
<style>

.default{width:40px;height:40px;background:#00f;display:inline-block;transition:width 2s}

.animate{width:120px}

</style>

그리고 태그를 지정해줍니다
<div class="default"></div>

그리고 나서 자바스크립트를 통하여 클래스를 등록하거나 폭을 조정 해줍니다
document.getElementsByClassName("default")[0].className="default animate";

그러면 사각형이 2초에 걸쳐서 폭이 120px 로 늘어남을 볼 수 있습니다

핸들링을 해야 될필요가 있습니다
아직은 브라우저마다 표준이 아닌 형태를 제공중이어서 moz- , webkit- 이런것이 붙습니다
jQuery 를 사용하면 불편함을 해소 할 수 있어요 

jQuery(".default").bind( 'transitionend',function(){

  alert('transitionend');

});