jQuery Mobile - 페이지 트랜지션
페이지 트랜지션(Transition)은 페이지 이동간 애니메이션을 말한다. jQuery Mobile은 총 6개의 CSS 기반 트랜지션을 제공한다.
|
트랜지션 종류 |
설명 |
|
slide |
페이지가 왼쪽으로 미끄러지듯이 이동한다.(기본값) |
|
slideup |
페이지가 위쪽으로 미끄러지듯이 이동한다. |
| slidedown | 페이지가 아래쪽으로 미끄러지듯이 이동한다. |
| pop | 새 페이지가 팝업 형태로 올라온다. (다이얼로그 기본값) |
| fade | 기존 페이지가 희미해지면서 새 패이지가 나타난다. |
| flip | 새 페이지가 회전하면서 나타난다. |
페이지 기본 이동 트랜지션은 slide 이고 다이얼로그로 열 경우에는 pop 이다. 만약 직접 지정하고 싶다면 <a> 태그에 data-transition 속성을 추가하면 된다.
역방향으로 트랜지션 효과를 주고 싶다면 data-direction="revers" 속성을 추가 지정하면 된다.
<div data-role="page">
<div data-role="header">
<h1>Transition</h1>
</div>
<div data-role="content">
<a href="#secondPage" data-role="button" data-transition="slide">Silde</a>
<a href="#secondPage" data-role="button" data-transition="slideup">Silde Up</a>
<a href="#secondPage" data-role="button" data-transition="slidedown">Silde Down</a>
<a href="#secondPage" data-role="button" data-transition="pop">pop</a>
<a href="#secondPage" data-role="button" data-transition="fade">fade</a>
<a href="#secondPage" data-role="button" data-transition="flip">flip</a>
<a href="#secondPage" data-role="button" data-transition="slide" data-direction="reverse">Silde</a>
</div>
</div>
<div id="secondPage" data-role="page" data-add-back-btn="true">
<div data-role="header">
<h1>Transition</h1>
</div>
<div data-role="content">
<h1>Second page</h1>
</div>
</div>
<div data-role="header">
<h1>Transition</h1>
</div>
<div data-role="content">
<a href="#secondPage" data-role="button" data-transition="slide">Silde</a>
<a href="#secondPage" data-role="button" data-transition="slideup">Silde Up</a>
<a href="#secondPage" data-role="button" data-transition="slidedown">Silde Down</a>
<a href="#secondPage" data-role="button" data-transition="pop">pop</a>
<a href="#secondPage" data-role="button" data-transition="fade">fade</a>
<a href="#secondPage" data-role="button" data-transition="flip">flip</a>
<a href="#secondPage" data-role="button" data-transition="slide" data-direction="reverse">Silde</a>
</div>
</div>
<div id="secondPage" data-role="page" data-add-back-btn="true">
<div data-role="header">
<h1>Transition</h1>
</div>
<div data-role="content">
<h1>Second page</h1>
</div>
</div>
페이지 트랜지션은 모바이 기기마다 다소 차이가 있다.
'' 카테고리의 다른 글
| jQuery Mobile - moblieinit 이벤트 (0) | 2012.07.22 |
|---|---|
| jQuery Mobile - 페이지 이동 API (1) | 2012.07.21 |
| jQuery Mobile - 페이지 트랜지션 (2) | 2012.07.20 |
| jQuery Mobile - 다른 웹앱 실행 , 데이터 링크 (0) | 2012.07.19 |
| jQuery Mobile UI - 페이지 (0) | 2012.07.18 |
| jQuery Mobile 단일 페이지 . 외부 페이지 이동 (0) | 2012.07.17 |
댓글을 달아 주세요
ㅋㅋㅋ열심히네
십팔만명!?ㅋㅋㅋㅋㅋㅋ