gwt - GWT の CellTable にページング アニメーションを追加する

Question

(http://gwt.google.com/samples/Showcase/Showcase.html#!CwTabLayoutPanel のタブを変更するのと同じように機能する GWT の CellTable でページの変更をアニメーション化する方法を考え出そうとしています。 ）。言い換えれば、新しいテーブル ページが上 (または下) からスライドインします。CellTable は SimplePager を使用して、現時点でページ変更を開始します。

ありがとう、マティアス

Answer 1

スライド アニメーションを作成するには、少なくとも 2 つの既にレンダリングされたページが必要なため、単純な方法でそれを行う方法はありません。アニメーション化されたタブセットを使用したショーケースの例では、すべてのタブがレンダリングされ、すぐに使用できますが、SimplePager を使用した CellTable には、表示されているページを除いてレンダリングされたページがありません。新しいページは、CellTable 本体に直接レンダリングされるだけです。

したがって、CellTable と Pager を使用してそのような効果を本当に作成したい場合は、次のことを行う独自の CellTable と Pager のペアを実装する必要があります。

1. 行がレンダリングされた 2 つのコンテナーを保持します。1 つは表示され、2 つ目は非表示になります。
2. CellTable 本体には、内部に両方のコンテナーを持つビューポート (「overflow:hidden」CSS ルールを使用した <div> のみ) が必要です。
3. ページャーがページを変更するときは、CellTable に新しい行を非表示のコンテナーにレンダリングさせる必要があります。
4. 新しいデータがレンダリングされたら、非表示のコンテナーを適切な位置に配置して、引き続き表示されているように錯覚させ、表示します。
5. 両方のコンテナーを新しい位置に移動するアニメーションを提供します。アニメーション (タイマーなど) のコーディングは使用しないことをお勧めします - CSS3 変換ルールを使用する方がはるかに効果的です (「CSS3 transform プロパティ」および/または「CSS3 transition プロパティ」を参照)。
6. アニメーションが終了したら、最初のコンテナーを非表示にし、ポインターを表示コンテナーと非表示コンテナーに切り替えて、初期状態に戻します。

お役に立てれば。