Page transition — The CSS part

Now we can go to the core part — CSS Transition.

It is a good starting point to copy from the existing transition. Open the official jQuery mobile CSS file. Search .slide to go to the rules of slide transition.

There are two parts in the CSS transition, animation keyframes and page in/out.

Here is a sample animation keyframes. It defines generically how element moves form one state to the other state.

1@-webkit-keyframes slideouttoleft {
2  from { -webkit-transform: translate3d(0,0,0); }
3  to { -webkit-transform: translate3d(-100%,0,0); }
4}

And here is the transition part that tells the page view which animation to apply.

1.slide.out {
2  -webkit-transform: translate3d(-100%,0,0);
3  -webkit-animation-name: slideouttoleft;
4}

These are just examples. What we need is copy rules from the .slide class.

Note: To make the reading easier, I only show the property with -webkit- prefix vendor. In reality, we have -moz- and the official one without any prefix.

 1.slide.out, .slide.in {
 2  -webkit-animation-timing-function: ease-out;
 3  -webkit-animation-duration: 350ms;
 4}
 5.slide.out {
 6  -webkit-transform: translate3d(-100%,0,0);
 7  -webkit-animation-name: slideouttoleft;
 8}
 9.slide.in {
10  -webkit-transform: translate3d(0,0,0);
11  -webkit-animation-name: slideinfromright;
12}
13.slide.out.reverse {
14  -webkit-transform: translate3d(100%,0,0);
15  -webkit-animation-name: slideouttoright;
16}
17.slide.in.reverse {
18  -webkit-transform: translate3d(0,0,0);
19  -webkit-animation-name: slideinfromleft;
20}

Those are the copied style form jQuery mobile CSS. We put it in our app.css file and change it to the following code. Remember that the root page doesn’t move during transition? Our following code moves the .in and .out.reverse and keep .out and .in.reverse un-moved.

 1.customslide.out, .customslide.in {
 2  -webkit-animation-timing-function: ease-out;
 3  -webkit-animation-duration: 300ms;
 4}
 5.customslide.out {
 6}
 7.customslide.in {
 8  -webkit-transform: translate3d(0,0,0);
 9  -webkit-animation-name: slideinfromright;
10}
11.customslide.out.reverse {
12  -webkit-transform: translate3d(100%,0,0);
13  -webkit-animation-name: slideouttoright;
14}
15.customslide.in.reverse {
16  -webkit-transform: translate3d(0,0,0);
17  -webkit-animation-name: stay;
18}

Recall: At any page transition, there are two pages get evolved. The page that is coming in sight and the page that is leaving.

.in is the page that is coming. .out is the page that is leaving.

When the transition is going backward, .in.reverse is the (previous) page that is coming, and .out.reverse is the current page that goes back to its original out-of-sight position.

Note the last one use a new animation stay. It is there to make sure the .in.reverse state doesn’t inherit the animation from the .in rule, which makes the page moves a little bit.

1@-webkit-keyframes stay {
2  from { -webkit-transform: translate3d(0,0,0); }
3  to { -webkit-transform: translate3d(0,0,0); }
4}

What’s next? We’re going to take a look at “Sequential and simultaneous”.

◀ Customize page transition Sequential and simultaneous ▶

makzan.

Page transition — The CSS part

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