참조 - 삶의 조각들
페이지 트랜지션은 페이지에서 페이지로 이동할 때 애니메이션 효과를 말한다. jQuery Mobile 은 총 6개의 CSS기반 트랜지션 효과를 제공한다.
slide
페이지가 오른쪽에서 왼쪽으로 미끄러지듯이 이동한다. (기본값)
<a href="home.html" data-transition="slide" data-role="button">slide</a>
$.mobile.changePage("home.html", { transition : "slide" });
slideup
페이지가 아래에서 위쪽으로 미끄러지듯이 이동한다.
<a href="home.html" data-transition="slideup" data-role="button">slideup</a>
$.mobile.changePage("home.html", { transition : "slideup" });
slidedown
페이지가 위에서 아래쪽으로 미끄러지듯이 이동한다.
<a href="home.html" data-transition="slidedown" data-role="button">slidedown</a>
$.mobile.changePage("home.html", { transition : "slidedown" });
pop
기존페이지가 사리지고 새 페이지가 팝업 형태로 올라온다. (다이얼로그의 기본값)
<a href="home.html" data-transition="pop" data-role="button">pop</a>
$.mobile.changePage("home.html", { transition : "pop" });
fade
기존 페이지가 희미해지면서 사라지고 새 페이지 서서히 나타난다.
<a href="home.html" data-transition="fade" data-role="button">fade</a>
$.mobile.changePage("home.html", { transition : "fade" });
flip
기존 페이지 뒷면에 새 페이지가 있는 것처럼 회전하면서 새 페이지가 나타난다.
<a href="home.html" data-transition="flip" data-role="button">flip</a>
$.mobile.changePage("home.html", { transition : "flip" });
* 페이지 트랜지션은 모바일 디바이스에 따라서 약간은 다르게 동작할 수 있다.