makzan.

I build utilities and games.
I share know-how via books, classes and essays.

Table of Content

Transition

jQuery mobile provides several pre-built transition effect. We can test them all by creating link for each effect. The data-transition is used for jQuery to determine.

Available transitions:

  1. none
  2. fade
  3. pop
  4. flip
  5. turn
  6. flow
  7. slide
  8. slide-up
  9. slide-down
  10. slide-fade

We can test all the transition effects by adding them to the page. Note the data-transition controls which effect to use.

 1<a data-role='button' data-transition='fade' href='#contact'>Fade</a>
 2<a data-role='button' data-transition='pop' href='#contact'>Pop</a>
 3<a data-role='button' data-transition='flip' href='#contact'>Flip</a>
 4<a data-role='button' data-transition='turn' href='#contact'>Turn</a>
 5<a data-role='button' data-transition='flow' href='#contact'>Flow</a>
 6<a data-role='button' data-transition='slide' href='#contact'>Slide</a>
 7<a data-role='button' data-transition='slideup' href='#contact'>Slide Up</a>
 8<a data-role='button' data-transition='slidedown' href='#contact'>Slide Down</a>
 9<a data-role='button' data-transition='slidefade' href='#contact'>Slide Fade</a>
10<a data-role='button' data-transition='none' href='#contact'>None</a>

After we choose a transition style, we can go into further tuning by adding CSS3 GPU accelerated.

CSS 3D transform is accelerated by GPU. But the 2D transform, such as translateX, is not accelerated by GPU. So on the transition effect we use, we can overwrite those 2D transform functions to 3D ones.

1.slide.out, .slide.in {
2  -webkit-animation-timing-function: ease-out;
3  -webkit-animation-duration: 250ms;
4  -moz-animation-timing-function: ease-out;
5  -moz-animation-duration: 250ms;
6  animation-timing-function: ease-out;
7  animation-duration: 250ms;
8}

For more detail on how those easing functions affect the UI animation, check this post: Animation Principles in UI Design: Understanding Easing.

What’s next? We’re going to take a look at “Customize page transition”.

◀ Project 2 – Customize Page Transition Customize page transition ▶
overlaied image when clicked on thumbnail

Makzan | Mobile web app dev with phonegap | Table of Content

Mz square