CUSTOM PAGE TRANSITIONS 1

The jQuery Mobile (jQM) framework includes a set of CSS-based transition effects that can be applied to any page link that uses Ajax navigation. jQM also provides CSS hooks so that developers can easily include custom CSS transitions.

In this post we will look at using animations found in the popular animate.css library as jQM page transitions, and in part 2, we will develop a custom 3d transition from scratch.

In jQM we specify transitions by applying a data-transition attribute to a link (we can also globally set the default transition or pass the transition as a parameter to the change()/navigate() methods). When a transition is specified, jQM has definitions for transitioning the old page out of view, transitioning the new page into view, and the reverse transitions when going back.

To use transitions from the animate.css library, we simply need to reference the css file in our page and create a new CSS class whose name will be the transition name. Then within the new class reference the animate.css animation names for the in, out, reverse in, and reverse out directions.

Example

lets create a new transition

rotateInDownLeft for the new page entering
rotateOutUpRight for the old page leaving
rotateInUpRight and rotateOutDownLeft for the reverse directions

In CSS we create a new class called customRotate, then for each of the 4 directions, we set the animation-name to the desired animate.css animation. In addition, we can control the easing of the animation via animation-timing-function and duration of the animation via animation-duration (note the use of browser specific prefixes to ensure cross browser compatibility):


.customRotate.in {
    -webkit-animation-name: rotateInDownLeft;
    -moz-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft;
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-duration: 600ms;
    -moz-animation-duration: 600ms;
    animation-duration: 600ms;
}
.customRotate.out {
    -webkit-animation-name: rotateOutUpRight;
    -moz-animation-name: rotateOutUpRight;
    animation-name: rotateOutUpRight;
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-animation-duration: 500ms;
    -moz-animation-duration: 500ms;
    animation-duration: 500ms;
}
.customRotate.in.reverse {
    -webkit-animation-name: rotateInUpRight;
    -moz-animation-name: rotateInUpRight;
    animation-name: rotateInUpRight;
}
.customRotate.out.reverse {
    -webkit-animation-name: rotateOutDownLeft;
    -moz-animation-name: rotateOutDownLeft;
    animation-name: rotateOutDownLeft;
}

With a reference to animate.css and the above CSS added to your JQM project, you can now apply our new transition to page links as well as popups and dialog pages by specifying customRotate as the data-transition:

<a href="#page2" data-transition="customRotate">Animate.css Rotate</a>