de-vraag
さらに
質問

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

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

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

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

プログラミング
css3
jquery
jquery-mobile

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- など

「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です。

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