0

私はjQueryを使用してモバイルWebアプリケーションを開発していますが、ページが「半分に分割」され、上部が上にスライドし、下部が下にスライドするアニメーションを使用して、各ページを次のページに移行するように要求されました。次のページを公開します。

私は小さな考えを持っていますが、トラフを取得するための知識を持っていないようです：

2ディスプレイ付きキャンバス：なし、各幅幅：100％、高さ：50％。- 小切手

実際のディスプレイを上記のキャンバスにレンダリングしてもらいます-私には少しもアイデアがありません。

両方のキャンバスの下のdivの次のページをAjax-チェック

キャンバスをそれぞれの方向にスライドさせます-チェック

キャンバスを表示するように設定します：なし、元の位置に復元します-チェック

何かご意見は？必要に応じて、jQueryの他のフレームワークアプリを使用することもできます。また、キャンバスのアイデアを別のものに変更することもできます。

編集：明確にするために、ページがクローゼットであると想像してください、しかしそのドア（実際のページ）がそれぞれ屋根と床にスライドするように垂直のもの（それは比較の最大ではありませんが、私に耐えてください）、したがってクローゼットの内容を見て、操作してみましょう（次のページ）。これは、戻るボタンがないため、アプリケーションのワークフローが最後の画面で終了するまで続きます。

4

2 に答える 2

1

私はあなたが何を望んでいるのかを知っていると確信しています。登録/フォーム プロセスに複数のページがあり、古いフェードイン/フェードアウトまたはスライド効果を使用する代わりに、上半分を上にスライドさせ、下半分を下にスライドさせたいとします。これを行うために、私はcanvasアイデアを捨てます。今のところ、キャンバスを使用して簡単に行う方法はないと思います。html2canvasスクリプトを試してみることもできますが、このようなレンダリングに関しては 100% 正確ではありません。

別の方法として、次のプロセスを使用することをお勧めします。序文として、フォームのすべてのステップに独自のコンテナ div (「ステップ ラップ」や「ステップ コンテナ」などと呼ばれるもの) があることを確認してください。次に、アニメーションを開始するときに最初に行うことは、現在のステップ ラップを複製し、それをステップ ラップ アニメーションのような名前にすることです。元のラップ、step-wrap、aheightを 50% に設定し、同じ高さの 50% で複製を最初のものの下に配置します。両方の div には、非表示のオーバーフローを持つスタイルが必要です。scrollTopまた、最初の div の続きのように見えるように、重複する div を一番下までスクロールするように設定してください。ここから先は順風満帆のはずです。

次に、最初のステップのすべてが機能したら、アニメーション プロセスを開始します。分割機能が理解できたので、好きなようにこれを行うことができます。2 つの div の分割を開始する前に、前のステップの後ろに次のステップを配置して、解きほぐしてください。

基本的に、あなたがする必要があるのは：

  1. divを複製する
  2. 両方の div (オリジナルと複製) を配置して、両方の高さが 50% に等しくなり、それらが互いに連続しているように見えるようにします。
  3. 上の div を上に、下の div を下にアニメーション化する

これは、このようなものがどのように機能するかを示す基本的なフィドルです。レンダリングされた画面をクリックして、アニメーションを開始します。

于 2012-12-27T02:25:37.010 に答える
0

backbone.js をベースにしたbackbone.jsとmarionette.jsを見てみましょう。

backbone.js は、個別のビューを定義できる MVC フレームワークです。Marionette は、リージョンをサポートし、必要に応じてビューを切り替える拡張機能です。切り替えロジックの内部では、遷移を簡単に実装できます。非常に一般的な答えですが、おそらく始めるのに役立つでしょう。

于 2012-12-27T02:26:27.443 に答える