Animieren von Übergängen bei mehreren Objekten mit einer einzigen Animation in KnockoutJS

Question

Ich verwende KnockoutJS 2.1 für eine Nachrichtenanwendung, an der ich gerade arbeite. Ich habe ein 4 x 2 Raster erstellt, das 8 Nachrichtenartikel gleichzeitig anzeigt (siehe Bild unten).

Ich habe diesem Raster ein Paging hinzugefügt, so dass beim Klicken auf die Schaltfläche "Weiter" 8 neue Nachrichtenartikel angezeigt werden. Das funktioniert perfekt! Was ich jedoch gerne möchte, ist den Übergang mit einer Animation versehen Wenn Sie also auf Weiter klicken, 8 neue Artikel werden von der rechten Seite eingeblendet und verdrängen die vorherigen 8 Artikel nach links aus dem Bildschirm. Etwa so:

Ich habe gesehen das Beispiel auf der Knockout-Website unter afterAdd y beforeRemove um animierte Übergänge mit jQuery anzuwenden. Das Problem bei diesem Ansatz ist, dass die Animation auf jeden einzelnen Nachrichtenartikel angewendet wird. Ich muss alle Artikel gleichzeitig animieren, mit einer einzigen Animation.

Die Idee, die ich habe, ist, dass ich ein Wrapper-Element um alle 8 Nachrichtenartikel verwenden würde, mit overflow: hidden . Ich könnte dann 8 neue Artikel rechts von den aktuellen Artikeln einfügen, die neuen Artikel wären aufgrund des verborgenen Überlaufs immer noch nicht sichtbar. Ich könnte dann alle 16 Artikel nach links schieben, so dass die neuen Artikel sichtbar sind und die alten Artikel links außer Sichtweite sind. Ich könnte dann die 8 alten Artikel aus dem DOM entfernen.

Ich bin mir nicht sicher, ob das mit Knockout überhaupt möglich ist, oder ob es vielleicht einen besseren Ansatz gibt.

Wie würden Sie den Übergang von 8 Artikeln, die dem DOM hinzugefügt werden, und 8 Artikeln, die aus dem DOM entfernt werden, durch eine einzige Animation animieren?

Answer 1

Könnte Ihre Knockout-Vorlage fügen Sie sie in Gruppen von 8 zu einem gesamten Container, dann animieren Sie den Container links oder rechts die Breite einer Gruppe? Etwas wie dies:

<div class="newsCarousel">

  <div class="newsGroup">
    <h2>Title 1</h2>
    <h2>Title 2</h2>
    <h2>Title 3</h2>
    ...
    <h2>Title 8</h2>
  </div>

  <div class="newsGroup">
    <h2>Title 9</h2>
    <h2>Title 10</h2>
    <h2>Title 11</h2>
    ...
    <h2>Title 16</h2>
  </div>

</div>