Mobile Jquery - Efecto Flip

Question

Encuentre la URL a continuación.

http://jquerymobile.com/demos/1.1.0/docs/pages/page-transitions.html

¿Cómo puedo utilizar estos efectos en la página proceso de carga o en document.onReady ??

Answer 1

La recreación de la transición flip de jQuery Mobile en una página estándar es bastante sencilla. Comience por crear un contenedor completamente posicionado con dos niños relativamente posicionados, que serán las dos páginas en las que está cambiando de página. Una vez que tenga ambas páginas cargadas, aplique las clases 'flip' y 'out' a la página que se reemplaza y llame al hide(). Finalmente, agregue las clases 'flip' e 'in' a la página que se muestra y llame al show().

Las transiciones son solo transformaciones CSS3, así que ten en cuenta que no funcionarán en todos los navegadores y que pueden funcionar mal en pantallas grandes/máquinas de bajo rendimiento.

HTML

<button type="button" id="go">FLIP</button> 
<div class="container"> 
    <div class="page1"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    </div> 
    <div class="page2"> 
     Duis interdum, odio vel condimentum varius, nibh nunc ultrices velit. 
    </div> 
</div> 

CSS

.container { 
    position: absolute; 
    -webkit-perspective: 1000; 
    -moz-perspective: 1000; 
} 
.page1 { 
    width: 300px; 
    height: 300px; 
    background: red; 
    position: relative; 
} 
.page2 { 
    width: 300px; 
    height: 300px; 
    background: blue; 
    position: relative; 
    display: none; 
} 

.flip { 
    -webkit-backface-visibility:hidden; 
    -webkit-transform:translateX(0); 
    -moz-backface-visibility:hidden; 
    -moz-transform:translateX(0); 
} 
.flip.out { 
    -webkit-transform: rotateY(-90deg) scale(.9); 
    -webkit-animation-name: flipouttoleft; 
    -webkit-animation-duration: 175ms; 
    -moz-transform: rotateY(-90deg) scale(.9); 
    -moz-animation-name: flipouttoleft; 
    -moz-animation-duration: 175ms; 
} 
.flip.in { 
    -webkit-animation-name: flipintoright; 
    -webkit-animation-duration: 225ms; 
    -moz-animation-name: flipintoright; 
    -moz-animation-duration: 225ms; 
} 
.flip.out.reverse { 
    -webkit-transform: rotateY(90deg) scale(.9); 
    -webkit-animation-name: flipouttoright; 
    -moz-transform: rotateY(90deg) scale(.9); 
    -moz-animation-name: flipouttoright; 
} 
.flip.in.reverse { 
    -webkit-animation-name: flipintoleft; 
    -moz-animation-name: flipintoleft; 
} 
@-webkit-keyframes flipouttoleft { 
    from { -webkit-transform: rotateY(0); } 
    to { -webkit-transform: rotateY(-90deg) scale(.9); } 
} 
@-moz-keyframes flipouttoleft { 
    from { -moz-transform: rotateY(0); } 
    to { -moz-transform: rotateY(-90deg) scale(.9); } 
} 
@-webkit-keyframes flipouttoright { 
    from { -webkit-transform: rotateY(0) ; } 
    to { -webkit-transform: rotateY(90deg) scale(.9); } 
} 
@-moz-keyframes flipouttoright { 
    from { -moz-transform: rotateY(0); } 
    to { -moz-transform: rotateY(90deg) scale(.9); } 
} 
@-webkit-keyframes flipintoleft { 
    from { -webkit-transform: rotateY(-90deg) scale(.9); } 
    to { -webkit-transform: rotateY(0); } 
} 
@-moz-keyframes flipintoleft { 
    from { -moz-transform: rotateY(-90deg) scale(.9); } 
    to { -moz-transform: rotateY(0); } 
} 
@-webkit-keyframes flipintoright { 
    from { -webkit-transform: rotateY(90deg) scale(.9); } 
    to { -webkit-transform: rotateY(0); } 
} 
@-moz-keyframes flipintoright { 
    from { -moz-transform: rotateY(90deg) scale(.9); } 
    to { -moz-transform: rotateY(0); } 
} 

JavaScript

Tendrá que sustituir esta parte con algo más relevante para su página, pero el concepto será lo mismo.

$('#go').click(function() { 
    var page1 = $('.page1'); 
    var page2 = $('.page2'); 
    var toHide = page1.is(':visible') ? page1 : page2 ; 
    var toShow = page2.is(':visible') ? page1 : page2 ; 

    toHide.removeClass('flip in').addClass('flip out').hide(); 
    toShow.removeClass('flip out').addClass('flip in').show(); 
}); 

Aquí es una demostración de trabajo: http://jsfiddle.net/lakario/VPjX9/