テーブル行の遷移効果

Question

HTMLテーブルレイアウトを使用して表示されたデータページ間を移動するときにトランジションエフェクトを作成することにしています。理想的には、通常のjQuery UIトランジションのいずれかを使用したいと思いますが、それは困難であることが証明されています。

つまり、テーブル全体にエフェクトを適用すると、すべて問題ありません。しかし、私はヘッダー行が影響を受けないようにしたい、静的なままにする必要があるので、これは有用ではありません。

<tbody>タグにエフェクトを適用すると、予期せぬ結果が生じます。フォーマット中は、トランジション中にさまざまな方法で不正確になります。

ラッパー要素ではなく、すべてのテーブル行に同時にエフェクトを適用できますが、実際は均一なエフェクト（単純なフェードアウト/フェードインのような）では効果があります。

私は別のテーブルとしてヘッダーを作ることはできますが、列が正しく整列するようにすることは難しいので、レイアウトを完全に固定する必要があります。これも理想的ではありません。

ヘッダーをテーブルから分離せずにこの作業を改善する方法がありますか、これは本当に良い結果をもたらす唯一の方法ですか？

Answer 1

あなたは仕事をするためのコードを投稿していないので、私はあなたに指示を与えることができます。しかし、私はあなたが次のことを試してくださいお勧めしたい：

• は
• 、テーブルの親要素（必要に応じて1を追加）にposition: relative;を適用position: absolute;を適用
• 、（その子孫なし）<table>要素を複製し、新しいテーブルに適切なz-index、親要素に新しいテーブルので、Nを追加
• 、新しいテーブルにディープクローンヘッダ行
• 、それはオリジナルの上に残るようにappend() EWヘッダー行は、
• が元<table>要素にアニメーションを実行し、アニメーション中
remove()
• 新しい<table>要素を元のをマスクします。