jQuery Mobile CSS3 Page Transitions without jQuery Mobile Library

问题

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!

回答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.

回答2:

Check out 'Non-Jquery Page Transitions lightweight' by fasw.

Demo here: http://www.fasw.ws/demos/transitions1/slide1.html

And source here: http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/

This is 1.7k of JS producing transitions that are just like those produced by the whole mobile jQuery Lib.

回答3:

You could look into just the page transition library as I know jQM is decoupling widgets as of Beta RC2:

http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released
http://github.com/jquery/jquery-mobile/tree/master/js

来源：https://stackoverflow.com/questions/7920730/jquery-mobile-css3-page-transitions-without-jquery-mobile-library

标签

jquery

css3

jquery-mobile