jQuery Mobile CSS3ページ遷移（jQueryモバイルライブラリなし）

Question

HTML/JS（jQuery）/ CSSを使用して作成したモバイルアプリを持っていますが、jQuery Mobileで見られるようなページ遷移を含めることを検討していますjQuery Mobile Framework全体を含める必要はありません。

これらのアニメーションは、CSS3トランジションがjQueryトリガに関連付けられているように見えますが、どこから開始するのかはわかりません。誰にもアイデアはありますか？

ご協力いただければ幸いです！

Answer 1

jQuery MobileのCSSファイルの非圧縮バージョンをダウンロードし、必要な特定のトランジションのクラスをコピーします。

CSSは、ここで見つけることができます：http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.css

そして、あなたがコピー・アウトした場合の移行のためのCSSクラスのすべての遷移のためのコードは、行1270から始まり、それは約6キロバイトの情報のです。ここで

は、上記のCSSファイルからいくつかのサンプルコードです：

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

だから、フリップにするためにあなたが.flipクラスと.inクラスを追加して、フリップアウトするためにあなたが追加になる要素を要素.flipクラスと.outクラスです。

はまた、jQueryのCSSだけで-webkit-接頭辞が含まれていますが、より多くのブラウザをサポートしたい場合は、次のように他の接頭辞を追加することができますなど、-moz-、-o-

Answer 2

私はjQMを知っているようにあなただけのページ遷移ライブラリに見ることができますベータRC2のようなウィジェットをデカップリングされています

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

Answer 3

「JQuery以外のページ遷移は軽量」をfaswでチェックしてください。ここ

デモ：ここhttp://www.fasw.ws/demos/transitions1/slide1.html

ソース：http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/

これは単に全体のモバイルのjQueryのLibによって生成されるもののようなものの遷移を生成するJSの1.7Kです。