使用带有 jquery mobile 的 animate.css 库来实现页面转换

Question

来自世界各地的 Stack Overflow 员工您好！希望你们都做得很好！我今天只有一个查询。我刚刚发现了一个很棒的 css3 库，叫做 animate.css http://daneden.github.io/animate.css/，我正在尝试用 jquery mobile 来实现它来定制我的应用程序页面转换。我试图从一个页面转到另一个页面，并将 animate.css 类应用于页面 div，但是在发生花哨的转换之后，页面仍然在同一页面上并且没有到达目标页面。如果有人对如何实现这一目标有任何线索，请告诉我。谢谢这里的代码：

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 没问题。

添加 2 个引用 animate.css 中所需过渡的 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

更新：控制过渡速度：

.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;
}