Join Joseph Lowery for an in-depth discussion in this video Applying page transitions, part of Building Android and iOS Apps with Dreamweaver CS5.5.
Page transitions are among the slickest effects baked into jQuery Mobile. These effects take advantage of Mobile browser's advanced CSS3 capabilities to handle transforms and transitions. Let me show you an example and then we'll take a look at how it works. So here is the Mount Whitney page. Now watch what happens when I flip to Photos. This is called the Flip effect and if I click the Back button, the effect actually reverses itself. Okay, let me show you the code for setting that up.
The key attribute is data transition and these go in any of the links. So in the mt_whitney_info link after my class attribute I am going to press the Spacebar and then start to type in data, hit Return and then add tran for transitions and again hit Return and here you see the various transitions available to you, fade, flip, pop, slide is the default, slidedown and slideup.
Let's take a look at a couple of those. So let's take a look at fade at first. Let me go ahead and copy data transition fade into a couple of the other links and then we'll take a look in Live View. All right, let's go into Live View, click on Photos and you can see the pretty subtle fade that happens. Let me hit Back so that we are back on the Mount Whitney page and click on Map and there's a cross fade again. All right! Let's try another effect.
I'll go back up to where my main page is, remove fade and then press Ctrl+Spacebar in order to bring up the code hints again. Let's try slidedown this time. I am just going to copy that and paste it in place of the fade. Let's refresh. Now if I press Photos, Dreamweaver slides it down very quickly and if you hit Back, it actually reverses and slides up.
Okay, you can go ahead and explore the rest of the transitions on your own. Now let's go in and change the data transition to flip and do that on each link and then add the attribute to all the other links. There's all the links for the Photo page and let's go down to the Map page. I'll save my document, go back to Live View and toggle that off and back on and now as I click on photo, you can see the transition takes effect and if I hit Back, it actually reverses itself.
I think Dreamweaver does an okay job of rendering these effects, but to see them totally smoothly is best to preview them in either Safari or Chrome, let's take a look at it in Chrome. Let me reduce this to a more Smart Phone type size and now I'll click Photos and then let me go back and you can clearly see the flip turning from left to right and then right to left, pretty cool, right? jQuery page transitions provide a bit of sizzle to your mobile app without adding a lot of weight or processor load.
- Understanding the mobile app toolset
- Working with jQuery Mobile and mobile starters in Dreamweaver
- Applying an overall theme to an app
- Specifying Android settings
- Simulating the iPhone
- Setting up mobile pages
- Keeping jQuery Mobile current
- Applying page transitions
- Creating collapsible content
- Defining list views with images
- Creating web forms for mobile
- Integrating geolocation data with Google Maps
- Previewing an app in Device Central