Custom Page Transitions (part 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.

Animate.css was created by Daniel Eden. It is a library of key frame animations described in his own words as follows:

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.

Example

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):

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

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

Buy Me A Coffee :) @ ko-fi.com

Advertisements

2 thoughts on “Custom Page Transitions (part 1)

  1. Pingback: Custom Page Transitions (Part 2) | jQuery Mobile Tricks

Drop me a line or two ;)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s