使用jQuery Mobile的animate.css庫實現頁面轉換

Question

來自世界各地的Stack Overflow的朋友們！希望你們都做得很好！今天我只有一個詢問。我剛剛發現了一個名爲animate.css http://daneden.github.io/animate.css/的真棒css3庫，我試圖用jquery mobile來實現我的應用程序頁面轉換。我試圖從一個頁面到另一個頁面div應用animate.css類，但在幻想過渡發生後，頁面保持在同一頁面上，並沒有到達目標頁面。如果有人知道如何實現這一點，請告訴我。感謝這裏的代碼：

CSS：

<link href="./css/animate.css" rel="stylesheet" />

的Javascript：

<script language="javascript"> 
    $(function() { 
     $("a#home").click(function() { 
      animate(".box-a", 'rotateOutDownRight'); 
      return false; 
     }); 

    }); 

    function animate(element_ID, animation) { 
     $(element_ID).addClass(animation); 
     var wait = window.setTimeout(function(){ 
      $(element_ID).removeClass(animation)}, 1300 
     ); 
    } 
</script> 

HTML：

<!------- HOME PAGE ----------------------------------------> 

<div data-role="page" id="home" data-theme="c" class="box-a animated"> <!--Inicia pagina home --> 
    <div data-role="header"><h1>Animate</h1></div> 

    <div data-role="content"> 

    <p><a id="home" href="#pagina2">Box A will flash, click here!</a></p> 

    <a id="home" href="#pagina2" data-role="button">PAGE 2 W/ANIMATION.CSS</a> 
    <a href="#pagina2" data-role="button">PAGE 2 W/O ANIMATION.CSS</a>    
    </div>  <!-- End of div content --> 

    <div data-role="footer" data-position="fixed"><h3>Animate</h3></div>   
</div> 

<!----- PAGE 2 -----------------------> 

<div data-role="page" id="pagina2" data-theme="c"> <!--Inicia pagina home --> 
    <div data-role="header"><h1>Animate</h1></div> 

    <div data-role="content"> 

    <p>PAGE 2</p>  

    </div> <!-- End of div content --> 

    <div data-role="footer" data-position="fixed"><h3>Animate</h3></div>   
</div> 

網址：在這裏看到一個例子：http://apps.alfonsopolanco.com

Answer 1

jQM允許您定義自定義轉換（http://demos.jquerymobile.com/1.2.0/docs/pages/page-customtransitions.html）。爲此使用animate.css是沒有問題的。

添加從animate.css引用所需的過渡2個CSS規則：

.customRotate.in { 
    -webkit-transform: translateX(0); 
    -moz-transform: translateX(0); 
    -webkit-animation-name: rotateInUpRight; 
    -moz-animation-name: rotateInUpRight; 
} 
.customRotate.out { 
    -webkit-transform: translateX(0); 
    -moz-transform: translateX(0); 
    -webkit-animation-name: rotateOutDownRight; 
    -moz-animation-name: rotateOutDownRight; 
} 

然後簡單地錨標記上的data-transition屬性設置爲新的過渡的名稱：

<a id="home" href="#pagina2" data-role="button" data-transition="customRotate">PAGE 2 W/ANIMATION.CSS</a> 

這裏是DEMO

UPDATE：可以控制過渡的速度：

.in { 
    -webkit-animation-timing-function: ease-out; 
    -webkit-animation-duration: 750ms; 
    -moz-animation-timing-function: ease-out; 
    -moz-animation-duration: 750ms; 
} 

.out { 
    -webkit-animation-timing-function: ease-in; 
    -webkit-animation-duration: 555ms; 
    -moz-animation-timing-function: ease-in; 
    -moz-animation-duration: 555; 
}