2

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

4 x 2 网格的新闻项目

我在这个网格中添加了分页，所以当您单击下一步按钮时，会显示 8 条新的新闻文章。这工作得很好！但是，我想要在过渡中添加一个动画，所以当您单击下一步时，8 篇新文章会从右侧滑入，将之前的 8 篇文章从屏幕中推到左侧。像这样的东西：

动画过渡

我在 Knockout 网站上看到了使用 jQuery并应用动画过渡的示例。这种方法的问题是动画被应用到每个单独的新闻文章中。我需要用一个动画同时为所有文章制作动画。afterAddbeforeRemove

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

我不确定 Knockout 是否可以做到这一点，或者是否有更好的方法可以采用。

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

4

1 回答 1

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>
于 2013-04-18T12:55:07.120 回答