jQuery Mobile CSS3 Transiciones de página sin jQuery Mobile Library

Question

Tengo una aplicación móvil creada usando HTML/JS (jQuery)/CSS y estoy buscando incluir transiciones de página que imiten a las encontradas en jQuery Mobile (en específico, la transición flip) sin la necesidad de incluir todo el jQuery Mobile Framework.

Estas animaciones parecen ser transiciones CSS3 vinculadas a los desencadenadores jQuery, pero no tengo idea de dónde empezar. ¿Alguien tiene alguna idea?

¡Cualquier ayuda sería muy apreciada!

Answer 1

Descargue la versión no ministrada del archivo CSS para jQuery Mobile y copie las clases para las transiciones específicas que desee.

El CSS se puede encontrar aquí: http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.css

Y el código para las transiciones comienza en la línea 1270. Si copia-a cabo todas las clases CSS para las transiciones, que está a sólo 6 KB de información.

Aquí es un código de ejemplo del archivo CSS anterior:

.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; 
} 

Así que para voltear en un elemento deberá añadir la clase .flip y la clase .in, y plegable de un elemento deberá añadir la clase .flip y la clase .out.

También el jQuery CSS sólo se incluye -webkit- prefijos pero si quieres apoyar a más navegadores puede agregar otros prefijos como: -moz-, -o-, etc.

Answer 2

Se podría buscar en la biblioteca simplemente transición de página que sé JQM se desacoplamiento de componentes tal y como Beta RC2:

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

Answer 3

Echa un vistazo a 'Transiciones de página no-Jquery ligeras' por fasw.

demo aquí: http://www.fasw.ws/demos/transitions1/slide1.html

Y fuente aquí: http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/

Ésta es 1,7k de JS producir transiciones que son como los producidos por el conjunto móvil jQuery Lib.