使用KnockoutJS中的单个动画对多个对象进行动画转换

Question

我将KnockoutJS 2.1用于我目前正在处理的新闻应用程序。我创建了一个4乘2的网格，一次展示8篇新闻文章（见下图）。

我已经为此网格添加了分页，因此当您点击下一个按钮时，会显示8个新的新闻文章。这很好用！但是，我想要的是向过渡添加动画，所以当您点击下一步时，从右侧滑入8篇新文章，将之前的8篇文章推出屏幕左侧。这样的事情：

我在Knockout网站上看​​到the example，使用afterAdd和beforeRemove使用jQuery应用动画转换。这种方法的问题在于动画应用于每个单独的新闻文章。 我需要使用一个动画同时动画所有文章。

我的想法是，我会在所有8篇新闻文章中使用包装元素overflow: hidden。然后我可以在当前文章的右边添加8篇新文章，由于隐藏的溢出，新文章仍然不在视线范围内。然后我可以将所有16篇文章向左滑动，这样就可以看到新文章了，旧文章在左边看不到。然后我可以从DOM中删除8篇旧文章。

我不确定Knockout是否可行，或者是否有更好的方法。

您如何通过单个动画为添加到DOM的8篇文章和从DOM中删除的8篇文章的过渡动画？

Answer 1

您的Knockout模板可以将它们以8个为一组添加到整个容器中，然后您可以向左或向右移动容器的宽度吗？像这样：

<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>