As you navigate between the pages of your app, the jQuery Mobile framework uses CSS3 animations to show some cool transition effects. The fade transition is used by default for pages, and the pop transition is used for dialogs. You can navigate into a page with a particular transition, and when you navigate out of the page, you can reverse the direction of the transition. jQuery Mobile comes with a default set of 10 transitions as of v1.1.1. The jQuery Mobile online docs has a nice online demo showing all the available transitions. But that's not all; you can use CSS to create your own custom transitions and use them in your app. This recipe shows you how to use CSS and create a bouncing page effect during page transitions.
Copy the full code of this recipe from the code/02/custom-css-transition sources folder. You can launch this code using the URL http://localhost:8080/02/custom-css-transition/main.html.
The steps to be followed are:
Create the customtransition.css file, and define the bounceup custom transition as shown in the following code snippet. Animate the Y position property of the page in the CSS:
.bounceup.in, .bounceup.in.reverse { -webkit-transform: translateY(0) ; -webkit-animation-name: bounceupin; -webkit-animation-duration: 1s; -webkit-animation-timing: cubic-bezier(0.1, 0.2, 0.8, 0.9); } @-webkit-keyframes bounceupin { 0% { -webkit-transform: translateY(100%); } 90% { -webkit-transform: translateY(-10%); } 100% {-webkit-transform: translateY(0); } }
Define the reverse animation next:
.bounceup.out, .bounceup.out.reverse { -webkit-transform: translateY(100%); -webkit-animation-name: bounceupout; -webkit-animation-duration: 1s; -webkit-animation-timing: cubic-bezier(0.1, 0.2, 0.8, 0.9); } @-webkit-keyframes bounceupout { 0% { -webkit-transform: translateY(0); } 90% { -webkit-transform: translateY(110%); } 100% {-webkit-transform: translateY(100%); } }
Create main.html and include the reference to the customtransition.css stylesheet in its <head> section, as follows:
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com
/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="customtransition.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js">
</script>
<script src="http://code.jquery.com/mobile
/1.1.1/jquery.mobile-1.1.1.min.js"></script>Create the #main page with a link to open #page2. Set the bounceup custom transition defined earlier to the data-transition attribute:
<div id="main" data-role="page">
<div data-role="header">
<h1>Header of Main Page</h1>
</div>
<div data-role="content">
<a href="#page2" data-role="button"
data-transition="bounceup">Go to Page 2</a>
</div>
<div data-role="footer">
<h4>Footer of Main Page</h4>
</div>
</div>Finally, create the #page2 page with a link to go back to the #main page:
<div id="page2" data-role="page" data-title="Custom
Transition using CSS">
<div data-role="header">
<h1>Header of Page 2</h1>
</div>
<div data-role="content">
<a href="#" data-role="button" data-rel="back"
data-theme="b">Go Back</a>
</div>
<div data-role="footer">
<h4>Footer of Page 2</h4>
</div>
</div>Create the customtransition.css file and define the custom bounceup transition. First, define the .bounceup.in and .bounceup.in.reverse classes, with both having the same values. This will make both the transitioning into a new page and out of it (reverse) look similar. In the class, set the Y co-ordinate or the vertical position of the new page on the screen using the translateY property. Animate this property over the given duration of 1 second, using a Cubic Bezier animation curve. Next, define the keyframes for the animation of the Y co-ordinate (this is specified using the bounceupin animation name). The keyframes define the values of Y at various times within the animation.
You can use a simple trick to get the bounce effect that is used in this animation. Set the value of Y to beyond the screen at 90 percent duration, and then set it to the edge of the screen at 100 percent duration, or at the completion of the animation. This gives it a neat bouncing effect as the new page animates into the screen, extends out of the screen for a short duration, and comes back to the correct position. Similarly, define the .bounceup.out and .bounceup.out.reverse animations for the current page while it navigates out of the screen, as shown in the code.
Now, create main.html and include the CSS file in its <head> section after including the jquery.mobile.css file. Create the #main page, and add a link to open the #page2 page with the custom transition using the data-transition="bounceup" attribute. Finally, create the #page2 page with a link to go back to the #main page. Now when you launch the app and click on the buttons, the page navigation will occur, using a nice custom bouncing animation.
During a page transition, there is a from and a to page. jQuery Mobile applies the out class style on the from page (current page) and the in class style on the to page (new page). If the reverse transition is to be supported, the word reverse is suffixed to the in and out classes, as shown in the CSS file. Using these styles, jQuery Mobile will apply the right transition effects on the pages. You can further tweak the code in this recipe, and explore further with CSS animations to create more page animations. You can get as creative as you want!
The CSS styles are listed in this recipe to support only the web kit browsers (Chrome and Safari). You can explore this further and try to make it work on other browsers, such as IE, Firefox, or Opera. You will have to add vendor-specific prefixes to the CSS properties. Also, the browser should be capable of supporting the CSS property used. The vendor prefixes required for the popular browsers are as follows:
Chrome and Safari: –webkit
Opera: –o
Firefox: –moz
IE: –ms
To incorporate support for other browsers, you will have to extend the customtransition.css file provided in this recipe. You can do this by adding vendor prefixes for the properties, as follows:
.bounceup.in, .bounceup.in.reverse {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translate(0)
-o-transform: translate(0)
transform: translate(0)
-webkit-animation-name: bounceupin;
-moz-animation-name: bounceupin;
-ms-animation-name: bounceupin;
-o-animation-name: bounceupin;
animation-name: bounceupin;
}This has to be done for all the specified CSS properties that have the –webkit prefix in the code listed in this recipe.
The last line for each property shown in the preceding CSS is the name of the property after it becomes the standard. At this point, the browsers will drop support for that specific property's vendor prefixes. But you will not have to modify a single line of code in your CSS, as the standard property is already available in your file. The browser will skip all the properties it does not understand and pick up the standard property. So things will work just fine.
You will notice that the transition animation in this recipe will not work properly on all the browsers. But the basic functionality of page navigation works fine everywhere. The best support for CSS3 animation, as of writing this recipe, is offered by the web kit browsers. But the beauty of CSS3 is that as browsers continue to improve and as users upgrade their devices, the user will automatically get a better experience with your app. You will not have to modify any code or make any upgrade releases. This is called Progressive Enhancement. Using jQuery Mobile means that your code is already using progressive enhancement. This would not be so easy if your app was natively written.
The Using JS to create a slide and fade page transition recipe
The Configuring your default transitions recipe in Chapter 7, Configurations