jQuery Mobile CSS3 Transizioni di pagina senza jQuery Mobile Library

Question

Ho un'app mobile creata con HTML/JS (jQuery)/CSS e sto cercando di includere transizioni di pagina che imitano quelle trovate in jQuery Mobile (nello specifico la transizione di flip) senza la necessità di includere l'intero framework jQuery Mobile.

Queste animazioni sembrano essere transizioni CSS3 legate ai trigger jQuery ma non ho idea da dove iniziare. Qualcuno ha qualche idea?

Qualsiasi aiuto sarebbe molto apprezzato!

Answer 1

Scarica la versione non minificata del file CSS per jQuery Mobile e copia le classi per le transizioni specifiche che desideri.

Il CSS può essere trovato qui: http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.css

E il codice per le transizioni dalle ore linea 1270. Se si copia-out tutte le classi CSS per le transizioni, è solo circa 6KB di informazioni.

Ecco alcuni esempi di codice dal file CSS sopra:

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

Quindi, per flip-in un elemento è necessario aggiungere la classe .flip e la classe .in, e flip-out di un elemento si dovrebbe aggiungere la classe .flip e la classe .out.

Anche il jQuery CSS include solo -webkit- prefissi, ma se si desidera supportare più browser è possibile aggiungere altri prefissi come: -moz-, -o-, ecc

Answer 2

Si potrebbe esaminare solo la libreria di transizione di pagina che ne so jQm è disaccoppiamento widgets come 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

Controlla "Transizioni di pagina non Jquery leggere" di fasw.

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

Ed fonte qui: http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/

Questo è 1.7K di JS produrre transizioni che sono proprio come quelli prodotti da tutta cellulare jQuery Lib.