将animate.css库与jquery mobile一起使用以实现页面转换

Question

Hello folks at Stack Overflow from all over the world! hope you´re all doing great! I just have one inquiry today. I just found out about an awesome css3 library called animate.css http://daneden.github.io/animate.css/ which I am trying to implement with jquery mobile to custome my apps page transitions. I'm trying to go from one page to another with an animate.css class applied to the page div but after the fancy transition occured the page remains on same page and does not reach the targeted page. If anyone out there has any clue on how to achieve this, please let me know. Thanks Here the code:

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: see an example here: http://apps.alfonsopolanco.com

Answer 1

jQM allows you to define custom transition ( http://demos.jquerymobile.com/1.2.0/docs/pages/page-customtransitions.html ). Using animate.css for this is no problem.

Add 2 css rules that reference the desired transition from animate.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;
}

Then simply set the data-transition attribute on the anchor tag to the name of your new transition:

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

Here is a DEMO

UPDATE: To control the speed of the transition:

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