jQuery Mobile: Up and Running

Custom Transitions

We can create our own transitions using JavaScript (as seen in the previous chapter) or by applying pure CSS3. If we are going to use CSS3 animations, we need to understand how they work.

If we define a data-transition that the system doesn’t know, it looks to see if there is a JavaScript handler for that name. If not, it tries to apply a CSS3 animation.

The transition name is used as a class name applied both to the current page and the next one. The in class is also applied to the next page and the out class is applied to the current page.

That means that if we define a transition called card, we should define a selector for .card.in and .card.out. Optionally, we can define the reverse transition that will be used when going back and the reverse class is also added, so .card.in.reverse and .card.out.reverse should also be defined.

Tip

We don’t need to provide animation timing functions nor duration because these are already defined in the global CSS structural file.

Using CSS3 animations, we can create our own transition. Our card transition will be similar to slide, but the idea is that all the pages are placed one over the other, and when we go to the next card we just remove the one at the top (current page) and the other is revealed at the back (without animation):

.card.out { -webkit-transform: translateY(-100%); -webkit-animation-name: cardout; z-index: 1; /* It's above */ } .card.in { -webkit-transform: translateY(0); z-index: 0; /* It's below */ } @-webkit-keyframes ...