1. 2013. 10. 22. 23:39 개발자료/W3C
미래웹은 상당히 진보된 인터페이스를 제공합니다
페이지의 에니메이션을 담당하게되는 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');
});


Posted by Nightly Luna
,
® © Tanny Tales
/ rss