Page Transitions

<!-- Available transitions -->
<a href="#page2" data-transition="slide">Slide</a>
<a href="#page2" data-transition="slideup">Slide Up</a>
<a href="#page2" data-transition="slidedown">Slide Down</a>
<a href="#page2" data-transition="pop">Pop</a>
<a href="#page2" data-transition="fade">Fade</a>
<a href="#page2" data-transition="flip">Flip</a>
<a href="#page2" data-transition="turn">Turn</a>
<a href="#page2" data-transition="flow">Flow</a>

<!-- Reverse direction (e.g. back button) -->
<a href="#home" data-transition="slide" data-direction="reverse">Back</a>

<!-- Set defaults globally -->
<script>
$(document).on("mobileinit", function() {
  $.mobile.defaultPageTransition = "slide";
  $.mobile.defaultDialogTransition = "pop";
  $.mobile.maxTransitionWidth = false;
});
</script>