JQuery Mobile Tutorial : Components 03 - Page transitions -

*** Page transitions

CSS 기반의 화면전환을 포함한 jQuery Mobile 프레임워크의 화면 전환 효과는 Ajax navigatin 과 함께 어느 link나 form submission에도 적용될 수가 있습니다.

아래는 jQuery Tutorial DOC 에서 제공하는 Sampler 의 이미지와 소스코드 입니다.

모바일에서 여기로 접속하셔서 직접 화면 전환 효과를 체험해 보세요.

<table margin="0">
    <tr>
        <th><h3>fade</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="fade" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>pop</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="pop" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="pop" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>flip</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flip" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="flip" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>turn</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="turn" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="turn" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>flow</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flow" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="flow" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>slidefade</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidefade" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="slidefade" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>slide</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slide" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="slide" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>slideup</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slideup" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="slideup" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>slidedown</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="slidedown" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>none</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="none" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-rel="dialog" data-transition="none" data-inline="true">page</a></td>
    </tr>
</table>

fade transition 만 볼 수 있으신가요? 모든 화면전환 효과를 보시려면 3D transform이 지원되는 브라우저라야 합니다. 3D 를 제대로 지원하지 않는 (Android 2.x 같은) 곳이서는 디폴트인 fade 효과가 보이게 될 겁니다.

Setting a transition on a link or form submit

디폴트로 프레임워크는 fade 화면전환을 지원합니다. 다른 화면전환효과를 원하시면 data-transition 속성을 링크에 추가하세요.

<a href="index.html" data-transition="pop">I'll pop</a>

Back 버튼이 눌려지면 이 프레임워크는 이 페이지를 보이도록 했던 페이지로 돌아갈 때 reverse version을 자동적으로 사용합니다. 이 기능을 명시하려면 data-direction="reverse" 속성을 링크에 넣어 주시면 됩니다.

Global configuration of transitions

만약 디폴트 화면전환을 다른것으로 하고 싶으면 defaultPageTransition 글로벌 옵션을 세팅하면 됩니다. Dialog는 defaultDialogTransition을 세팅하면 됩니다.

Browser support and performance

모든 화면전환은 CSS keyframe animation과 -webkit vendor prefixed rule 과 -moz rule을 사용해 만들어 졌습니다. -webkit 은 iOS,Blackberry, Android, Safari, Chrome browsers 에 적용되고 -moz 는 Firefox 브라우저에 적용 됩니다. keyframe animation과 부드러운 화면전환을 지원하는 것은 브라우저 버전이나 하드웨어에 따라 약간씩 다르게 나타날 수가 있습니다. 만약 animatin이 지원되지 않는 환경이라면 그냥 화면 전환 효과 없이 페이지 이동이 될 겁니다.

Defining fallback transitions for non-3D support

fade를 제외한 모든 화면전환 효과는 기본적으로 3D transform 이 지원 되어야 합니다. 이 기능이 지원되지 않는 디바이스들에서는 모든 화면전환 효과가 fade 화면전환으로 바뀌어서 display 될 겁니다. 이 경우에도 부드럽게 화면이 움직이는 효과는 지원이 됩니다. 안드로이드 3.0 같은 경우도 기술적으로는 3D transform 이 지원되지만 애니메이션 퍼포먼스가 별로인 경우도 있습니다. 그렇기 때문에 이 기능이 모든 디바이스에서 제대로 동작한다고 말할 수는 없지만 최대한 효과적으로 동작하도록 작업을 하고 있습니다.

3D transform이 적용되지 않는 경우 그에 대한 대비책으로 사용될 수 있는 화면 전환 효과를 설정할 수도 있습니다. 우리는 이것을 fade로 설정해 놓고 있습니다. 만약 아래처럼 세팅을 해 놓으면 화면전환효과가 특별히 없이 페이지 이동이 일어날 겁니다.

$.mobile.transitionFallbacks.slideout = "none"


Setting a max width for transitions

창의 width 가 특정 pixel width 보다 클 경우 transition을 none으로 세팅해서 디폴트로 화면전환 효과를 사용하지 않도록 할 수 있습니다. 이 기능은 큰 스크린의 경우 화면 전환 효과가 별로일 수 있을 때 유용하게 사용할 수 있습니다. 이 기능은 $.mobile.maxTransitionWidth 글로벌 옵션을 사용해서 세팅할 수 있습니다.

이 글로벌 옵션의 디폴트는 false로 돼 있습니다. 이 옵션의 value로는 아무 숫자나 false value 가 올 수 있습니다. 만약 이 value 가 false가 아니면 핸들러는 윈도우의 크기가 특정한 value 보다 클 경우 transition을 none 으로 취급합니다.

Creating custom transitions

jQuery Mobile은 custom transition도 추가할 수 있도록 지원합니다. 이 기능은 $.mobile.transitionHandlers dictionary 에 넣으시면 되는데요.

이걸 이용하면 여러분 앱에 여러분이 원하는 아주 다양한 화면전환 효과를 사용할 수가 있습니다.