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

私はHTML/JS(jQuery)/ CSSを使って作成したモバイルアプリを持っていますが、jQuery Mobile Framework全体を含める必要はなく、jQuery Mobile(特にフリップトランジション)のものを模倣したページ遷移を含むようにしています。

これらのアニメーションは、CSS3トランジションがjQueryトリガーに結びついているように見えますが、どこから始めたらいいか分かりません。誰にもアイデアはありますか?

どんな助けでも大歓迎です!

7
jQMはBeta RC2のデカップリングウィジェットです: jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-releas‌ ed これを見てください: github.com/jquery/jquery-mobile/tree/master/js
追加された 著者 Phill Pafford,
@PhillPaffordありがとうございました。それは最高です。
追加された 著者 dSquared,

3 答え

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

The CSS can be found here: http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.css

トランジションのコードは1270行から始まります。トランジションのCSSクラスをすべてコピーアウトすると、約6KBの情報しか得られません。

上記の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- など

8
追加された
完璧;私はこれを次に試みることを考えていた、そしてそれは行く道のように見える。ありがとうございました!
追加された 著者 dSquared,
さらに良い;ありがとうございました。
追加された 著者 dSquared,
あなたの質問に対するPhillのコメントをチェックアウトすると、そのGITリポジトリのファイルを調べると、次のようになります: github.com/jquery/jquery-mobile/blob/master/js/… これは2KB未満で、アニメートしている要素に必要なCSSを追加/削除します。
追加された 著者 Jasper,
ワオ !!それはクールなトリックだった:)
追加された 著者 Anmol Saraf,

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

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

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

これは、モバイルjQueryライブラリ全体で生成されたものと同じように、JS生成遷移の1.7kです。

3
追加された

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

1
追加された