2

CSS @media クエリを使用してモバイル フレンドリー バージョンにスケールダウンする Web アプリケーションを構築しました。

DIV を表示する 2 つのメイン コンテンツを切り替えるボタンが必要です。

@media クエリを使用してページが読み込まれると、他のクエリは次の方法で非表示になりますdisplay: none;

ボタンをクリックすると、それを表示し、表示されているボタンを非表示にする必要があります。これは現在既に行っています。

しかし、私はこのプロセスをアニメーション化して、モバイル デバイスでスムーズに動作させたいと考えています。

しかし、私はjquerymobileがこれをどのように行うのか理解できません。これは完全に機能します。

非モバイル jquery を使用する mobilejquery のように、パネル (div) を左からスライドオフし、別のパネルを右からスライドインするにはどうすればよいですか?

例: http://m.stanford.edu/ ここでは、リスト項目をクリックすると、スライドして別の項目がスライドインします。

ありがとうございました。

4

1 に答える 1

9

HTML5/css/javascript を使用してハードウェア アクセラレーション アニメーションを実行するのに役立つ主な機能は、スライドの水平 (x) 位置を左または右に変換する-webkit-transform: translate3d cssルールです。

translate3d(x, y, z), translateZ(z)

要素を x、y、z 方向に移動し、要素を z 方向に移動します。正の z は視聴者に向かっています。x や y とは異なり、z 値はパーセンテージにすることはできません。

上記の機能と JavaScript を使用して、モバイル デバイスで全画面の div をスライドさせる方法を示すこの優れたチュートリアルに従ってください。

html5 によるハードウェア アクセラレーションの詳細については、この記事を参照してください。

于 2013-02-17T19:22:17.160 に答える