07 - jQuery Mobile - Transitions

Introduction

jQuery Mobile provides a number of CSS3 effects that you can apply when a page or dialog is opened. You need to set the value of data-transition attribute to any of the available CSS3 effects. Some of the available CSS3 effects include fade, slide, pop, turn and so on. You can change the direction in which the effect occurs by setting the value of data-direction attribute to reverse.

Setting a Transition

The default transition that is applied when opening a page or dialog is fade. To change the transition effect, you need to set the value of data-transition attribute to the required CSS3 effect. Different CSS3 effects that you can apply are fade, flip, flow, pop, slide, slidedown, slidefade, slideup, turn and none.

Try this yourself:

<!DOCTYPE html>
  <html>
   <head>
     <title>Sample Code</title>
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
     <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
   </head>
   <body>
    <!-- Start of welcome page -->
    <div id="welcome" data-role="page">
      <div data-role="header" data-theme="b">
        <h1>Welcome to My WebSite!!!</h1>
      </div>
      <div data-role="content">
        <h2>This site is for cake lovers!!!</h2>
      </div>
        <a href="#first" data-transition="fade" data-role="button" data-theme="e">Find Cakes List</a>
        <div data-role="footer" data-theme="b">
          <h3>Copyright All Rights Reserved</h3>
        </div>
    </div>
    <!-- Start of first page -->
    <div id="first" data-role="page">
       <div data-role="header" data-theme="a">
         <h1>List of Cakes!!!</h1>
       </div>
       <div data-role="content">
         <h3>Here is a list of yummy cakes!!!</h3>
         <ul>
           <li>Black Forest Cake</li>
           <li>Chocolate Cake</li>
           <li>White Forest Cake</li>
        </ul>
        <a href="#welcome" data-transition="fade" data-direction="reverse" data-role="button" data-theme="b">Back to Main Page</a>
      </div>
      <div data-role="footer" data-theme="a" data-position="fixed">
         <h3>Copyright All Rights Reserved</h3>
      </div>
    </div>
   </body>
</html>

Save the file as default.html and open it using your browser. See the effect when the page opens by clicking the Find Cakes List button in the first page as well as the Back to Main Page button in the second page.

Try changing the value of data-transition attribute in both the links to different CSS3 fade effects and see the change in effect as the page opens. The effect is not that visible for fade transition. But if you set the value of data-transition attribute to flip, slide or turn, you could see the effects clearly. As we have set the value of data-direction to reverse for the Back to Main Page button, you could see that the effect takes place in the reverse direction when the first page opens.

Summary

In this section, we have seen how to apply different effects for the page opening. We used the data-transition attribute to set the CSS3 effect and the data-direction attribute to change the direction of the effect.

Like us on Facebook