-
2013. 10. 22. 23:39 개발자료/W3C
미래웹은 상당히 진보된 인터페이스를 제공합니다
페이지의 에니메이션을 담당하게되는
먼저 스타일정의를 해주어야 합니다
그리고 태그를 지정해줍니다
그리고 나서 자바스크립트를 통하여 클래스를 등록하거나 폭을 조정 해줍니다
그러면 사각형이 2초에 걸쳐서 폭이 120px 로 늘어남을 볼 수 있습니다
핸들링을 해야 될필요가 있습니다
아직은 브라우저마다 표준이 아닌 형태를 제공중이어서 moz- , webkit- 이런것이 붙습니다
jQuery 를 사용하면 불편함을 해소 할 수 있어요
페이지의 에니메이션을 담당하게되는
transition
을 알아보도록 하죠먼저 스타일정의를 해주어야 합니다
<
style
>
.default{
width
:
40px
;
height
:
40px
;
background
:
#00f
;
display
:inline-
block
;transition:width
2
s}
.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