jquery mobile은 페이지를 이동하거나 대화상자를 표시할 때 애니메이션을 제공합니다.

 

 

 

a 태그에 data-transition 속성을 이용하여 적용합니다.

 

transition 속성은 다음과 같습니다.


fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none

 

위 속성들은 페이지 전환에 사용 가능하며 팝업이나 툴팁에는 일부 속성만 사용 가능합니다.

 

 

data-direction="reverse" 속성을 사용하면 애니메이션이 반대로 실행되도록 합니다.

 

자동으로 생성된 버튼이나 대화상자는 jquery mobile에서 자동으로 역방향 애니메이션이 실행되도록 합니다.

 



 

예제소스입니다.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>jquery mobile</title>
 
<link rel="stylesheet" href="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css">
<script src="./jquery/jquery-1.11.0.js"></script>
<script src="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
 
</head>
<body>
 
<section id="page1" data-role="page">
    <header data-role="header"><h1>jQuery Mobile</h1></header>                   
    <div class="content" data-role="content">
        <p>1 page</p>
        <p><a href="#page2" data-rel="dialog" data-transition="pop">go page2</a></p>
    </div>
    <footer data-role="footer"><h1>cofs</h1></footer>
</section>
 
<section id="page2" data-role="page">
    <header data-role="header" data-add-back-btn="true"><h1>jQuery Mobile</h1></header>
    <div class="content" data-role="content">
        <p>2 page</p>
        <p><a href="#page3" data-transition="turn">go page3</a></p>
    </div>
    <footer data-role="footer"><h1>cofs</h1></footer>
</section>
 
<section id="page3" data-role="page">
    <header data-role="header" data-add-back-btn="true"><h1>jQuery Mobile</h1></header>
    <div class="content" data-role="content">
        <p>3 page</p>
        <p><a href="#page1" data-transition="slideup">go page1</a></p>
    </div>
    <footer data-role="footer"><h1>cofs</h1></footer>
</section>
 
</body>
</html>
cs

 



 

일부 애니메이션은 jquery mobile css 에 class 로 정의되어있어서 class를 토글하는 것만으로도 애니메이션을 표현할 수 있습니다.

 

다음 예제는 class를 토글하여 애니메이션을 동작합니다.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>jquery mobile</title>
 
<link rel="stylesheet" href="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css">
<script src="./jquery/jquery-1.11.0.js"></script>
<script src="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
 
</head>
<body>
 
<section id="page1" data-role="page">
    <header data-role="header"><h1>CSS3 Animations</h1></header>                   
    <div class="content" data-role="content">
        <p id="slidingTest">Show/Hide Test 클릭해보세요</p>
        <div id="textEl" class="slide out">Test 가나다라마바사</div>
    </div>
    <footer data-role="footer"><h1>cofs</h1></footer>
</section>
 
<script type="text/javascript">
$(function(){
    $("#slidingTest").click(function(){
        $("#textEl").toggleClass("reverse out in");
    });
});
</script>
 
</body>
</html>
cs

 

 

애니메이션으로 원하는 결과를 얻고 싶다면 실제로 여러 속성을 바꿔가면서 실험해보는 것이 좋습니다.

 

단, 애니메이션은 시각적으로 좋기는 하지만 잘못 사용한다면 접근성이나 사용성 등에서 좋지않은 결과를 가져올 수 있습니다.

 

by 개발자 CofS 2016.03.15 09:33