Skip to Main Content
jQuery Mobile: Up and Running
book

jQuery Mobile: Up and Running

by Maximiliano Firtman
February 2012
Beginner to intermediate content levelBeginner to intermediate
272 pages
6h 20m
English
O'Reilly Media, Inc.
Content preview from 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 ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

jQuery Mobile

jQuery Mobile

Jon Reid

Publisher Resources

ISBN: 9781449331085Supplemental ContentErrata Page