Hi Hi

'jQuery Mobile 페이지 트랜지션'에 해당되는 글 1건

  1. jQuery Mobile - 페이지 트랜지션 (2)

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>

페이지 트랜지션은 모바이 기기마다 다소 차이가 있다.