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 ...
Get jQuery Mobile: Up and Running now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.