javascript - 使用 animate.css 库和 jquery mobile 实现页面转换

Question

来自世界各地的 Stack Overflow 的 friend 们，你们好!希望你们都做得很好!我今天只有一个询问。我刚刚发现了一个很棒的 css3 库，叫做 animate.css http://daneden.github.io/animate.css/我正在尝试使用 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>

URL:请在此处查看示例: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;
}

然后简单地将 anchor 标记上的 data-transition 属性设置为新转换的名称:

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

Here is 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;
}