現在取り組んでいるニュース アプリケーションに KnockoutJS 2.1 を使用しています。一度に 8 つのニュース記事を表示する 4 x 2 のグリッドを作成しました (下の画像を参照)。
このグリッドにページングを追加したので、[次へ] ボタンをクリックすると、8 つの新しいニュース記事が表示されます。これは完全に正常に機能します！ただし、トランジションにアニメーションを追加したいので、[次へ] をクリックすると、8 つの新しい記事が右側からスライドインし、前の 8 つの記事が画面から左側に押し出されます。このようなもの：
Knockout Web サイトで、jQuery を使用してアニメーション化されたトランジションを使用して適用する例を見てきました。このアプローチの問題点は、アニメーションが個々のニュース記事に適用されることです。1 つのアニメーションで、すべての記事を同時にアニメーション化する必要があります。afterAddbeforeRemove
私が考えているのは、8 つのニュース記事すべてにラッパー要素を使用し、overflow: hidden. 次に、現在の記事の右側に 8 つの新しい記事を追加できます。新しい記事は、隠れたオーバーフローのためにまだ見えません。次に、16 の記事すべてを左にスライドさせて、代わりに新しい記事が表示され、古い記事が左に見えないようにすることができます。その後、8 つの古い記事を DOM から削除できました。
Knockout でそれが可能かどうか、またはより良いアプローチがあるかどうかはわかりません。
8 つの記事が DOM に追加され、8 つの記事が DOM から削除される遷移を、1 つのアニメーションでどのようにアニメーション化しますか?