Transitions in Mobile Web Structure

Transitions in Mobile Web Structure

CSS3 enables you to apply some amazing transitions to animate the change from page to page. These can help your app feel native and enhance the user experience. jQuery Mobile takes away the difficulty of CSS3 transitions by enabling you to set the type in the data-transition attribute in each link. For example, when you want to navigate to the Manage page in Corks, you want the transitions to slide to the right. This can be accomplished by adding the new attribute to the anchor tag:

<li><a data-icon=”grid”  data-transition=”slide”  href=”#manage”>Manage</a></li>

jQuery Mobile has tons of animations to choose from, including the following popular options:

  •  Fade: This is the default transition that is applied for every hashChange event.
  • Pop: The page will pop out as if it is coming from the screen’s center and heading toward you.
  • Flip: This is a common transition on the iPhone and is used to flip the current page 180 degrees to the opposite side.
  •  Turn: This animation acts like page turn in a book.
  • Flow: The page slides to the back, and the new page is pushed forward.
  •  Slide: Standard slide right and slide left are common in native applications.
  •  Slideup and slidedown: Allow the new page to appear as if it’s coming from the bottom or top of the page.

While jQuery Mobile makes transitions easier to implement, it’s important to understand how these transitions work so you can correctly apply them to the project you are working on. Transitions are based on CSS3 methods that create animation-like sequences that appear as though an element is moving across the screen. Basically, animation works the same way that a flip book does: When frames containing a static object are shown in rapid succession, the object appears to be moving. Here’s a look at how the common slide transitions work. Currently, the page structure code looks like this:

<div id=”activity”  class=”page” data-role=”page”>

….

</div>

<div  id=”manage” class=”page page-right”  data-role=”page”>

….

</div>

Add some classes (page, page-right) that you use to show the direction of the slide. This is handled automatically via JavaScript within jQuery Mobile. Next, you assign some CSS values to the page:

.page  {

position: absolute;

width:  100%;

height: 100%;

-webkit-transform: translate3 d(0, 0, 0);

}

Each page element needs to be 100% width and height to prevent the content from spreading from edge to edge of the browser. Finally the -webkit-transform element is very important; it activates GPU  acceleration in the browser for each page. If you didn’t use this method, WebKit browsers would not turn on the GPU  accelerations that allow CSS3 to use the graphics chip to help with the translation. If you see your browser flickering or loading elements in patches, it’s most likely due to the fact that this element is not called.

The -webkit-transform feature of CSS is very important for handling complex transi- tions or heavy CSS functions within your document. Failure to add this around the content you are changing might result in slow scroll or the section of the page appearing to be loading in “chunks.” If you are struggling with performance of certain pages, I recommend adding this method to the parent element. It’s important to note that on Android 2.3.x, any 3D translate function causes problems with input elements, so be careful to apply this method only when you need it. Overusing it could cause the browser to crash or memory issues.

After you have set the initial CSS, you can look into applying the transitions via JavaScript. Here is the full script, which can be placed inside the script tag at the bottom of the page:

function slideLoc(from, to)

{

var  myClasses =  document.getElementByID(from”).className.split(‘ ‘);

if (myClasses.indexOf(page-left’)   >  0)

{

document.getElementByID(from”).className =  “page trans page-right”;

}

else

{

document.getElementByID(from”).className =  “page trans page-left”

}

document.getElementByID(“to”).addClass(“page trans page-center”);

}

Whenever a link is tapped, the script will track the to and from page transitions. In this case, from would be the Activity page and to would be the Manage page. The next step is to take the class name from the activity  (from) element and split it. If that element contains a page-left, make the transition begin from the right side. If the element has a page- right, apply the same logic but begin the transition from the left. Finally, set the manage (to) page to be front and center after the transition has taken place.

In the preceding script, applying the trans class creates the transition effect. To make the script complete, add the CSS needed to make the transition occur:

.trans {

-moz-transition-duration: .5s;

-webkit-transition-duration: .5s;

-o-transition-duration: .5s;

}

So now, you just need to call the slideLoc element whenever you want to apply this transi- tion to your pages. This keeps the app clean and improves functionality. With modern brows- ers, there should be no reason to reload an entire page to show another element. Using page transitions enables you to mask the fact that you are still loading content in the background.

Written by imkits