css - jQuery Mobile CSS3 Page Transitions without jQuery Mobile Library

Question

I have a mobile app created using HTML/JS(jQuery)/CSS and I'm looking to include page transitions that mimic those found in jQuery Mobile (in specific the flip transition) without the need to include the whole jQuery Mobile Framework.

These animations appear to be CSS3 transitions tied to jQuery triggers but I have no idea where to start. Does anyone have any ideas?

Any help would be greatly appreciated!

Answer 1

Download the non-minified version of the CSS file for jQuery Mobile and copy out the classes for the specific transitions you want.

The CSS can be found here: http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.css

And the code for transitions starts at line 1270. If you copy-out all of the CSS classes for transitions, it's only about 6KB of info.

Here is some example code from the above CSS file:

.viewport-flip {
    -webkit-perspective: 1000;
    position: absolute;
}

.ui-mobile-viewport-transitioning,
.ui-mobile-viewport-transitioning .ui-page {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.flip {
    -webkit-animation-duration: .65s;
    -webkit-backface-visibility:hidden;
    -webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
}

.flip.out {
    -webkit-transform: rotateY(-180deg) scale(.8);
    -webkit-animation-name: flipouttoleft;
}

.flip.in {
    -webkit-transform: rotateY(0) scale(1);
    -webkit-animation-name: flipinfromleft;
}

So to flip-in an element you would add the .flip class and the .in class, and to flip-out an element you would add the .flip class and the .out class.

Also the jQuery CSS only includes -webkit- prefixes but if you want to support more browsers you can add other prefixes like: -moz-, -o-, etc.