javascript - 在 KnockoutJS 中使用单个动画对多个对象进行动画转换

Question

我将 KnockoutJS 2.1 用于我目前正在开发的新闻应用程序。我创建了一个 4 x 2 的网格，一次显示 8 篇新闻文章(见下图)。

我已将分页添加到此网格，因此当您单击下一步按钮时，会显示 8 篇新的新闻文章。这工作得很好!但是，我想要的是为过渡添加动画，所以当您单击下一步时，8 篇新文章从右侧滑入，将之前的 8 篇文章推出屏幕向左。 是这样的:

我看过 the example在 Knockout 网站上，使用 afterAdd 和 beforeRemove 使用 jQuery 应用动画过渡。这种方法的问题是动画应用于每篇单独的新闻文章。 我需要用一个动画同时为所有文章制作动画。

我的想法是，我将在所有 8 篇新闻文章周围使用包装元素，并使用 overflow: hidden。然后我可以在当前文章的右侧添加 8 篇新文章，由于 overflow hidden ，新文章仍然看不见。然后我可以将所有 16 篇文章向左滑动，这样新文章就可以看到了，而旧文章则向左看不到了。然后我可以从 DOM 中删除 8 篇旧文章。

我不确定这是否可以通过 Knockout 实现，或者是否有更好的方法可以采用。

您将如何通过单个动画为将 8 篇文章添加到 DOM 和从 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>