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.
Animate.css is a cross-browser plug-and-play CSS animation library for delightful animation in websites and web applications.
Visit the site to see examples of all the included animations.
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.
So, lets create a new transition that uses the following animations:
- 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):
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
<a href="#page2" data-transition="customRotate">Animate.css Rotate</a>
I have created a jsFiddle that demonstrates this and a few other animations on page transitions, popups and dialog pages:
jQM 1.4 – Demo
jQM 1.3 – Demo