jQuery Mobile - page transitions

JQM 프레임웍에는 어떤 오브젝트나 페이지 변경 이벤트시 적용 가능한 6가지의 css기반 변경 효과가 포함되어 있습니다. 새로운 페이지 혹은 이전 페이지로 페이지 이동시에 기본적으로 오른쪽에서 왼쪽으로 페이지 전환효과가 적용됩니다.

이런 효과를 나타내기 위해서는 앵커 태그에 data-transition 속성을 추가 하여 적용할 수 있습니다.

<a href="JQM page5-1.html" data-role="button" data-rel="dialog" data-transition="slide">slide</a>
<a href="JQM page5-1.html" data-role="button" data-rel="dialog" data-transition="slideup">slideup</a>
<a href="JQM page5-1.html" data-role="button" data-rel="dialog" data-transition="slidedown">slidedown</a>
<a href="JQM page5-1.html" data-role="button" data-rel="dialog" data-transition="pop">pop</a>
<a href="JQM page5-1.html" data-role="button" data-rel="dialog" data-transition="fade">fade</a>
<a href="JQM page5-1.html" data-role="button" data-rel="dialog" data-transition="flip">flip</a> 

페이지 전환시의 기본 효과는 slide 입니다. 왼쪽에서 오른쪽으로 넘어가듯이 보여지는데요.

그외에 효과를 사용하려면 지정을 해주면 되는데 slideup을 사용하면 페이지가 아래에서 위쪽으로 올라가듯이 페이지가 전환됩니다. slidedown은 위에서 아래로 페이지가 전환되고, pop은 팝업창이 뜨듯이 가운데 작은 창이 점점 커지면서 페이지가 전환됩니다. fade는 페이지가 사라지듯이 페이지전환이 되고, flip은 페이지가 가로로 줄어들면서 회전하며 페이지 전환이 됩니다.