如何使用 React 和 Immutable.js 制作动画？

Question

我有一个状态为{pages: [...], currentPage: 0} 的轮播。如果我设置currentPage = 1 我希望旋转木马向左滑动。如果我再次增加数字，应该会发生同样的事情，如果我减少它，它应该向右滑动。

我不知道应该如何处理不可变数据。动画不应该在状态对象中表示（应该吗？），但在 React 组件上存储属性会消除其“纯”功能性质。

解决这个问题的最佳方法是什么？

Answer 1

给我一个例子

这里没有使用 Immutable.js，但是current 属性只是一个数字，在 JS 中是不可变的，所以在某些方面是一样的想法：

http://jsbin.com/ligejacolo/edit?js,output

IMO 最好的选择是 ReactCSSTransitionGroup

+1 用于在 cmets 中对 ReactCSSTransitionGroup 的不必要的尖刻引用，如果您可以使用的话。

之后，让浏览器通过 CSS 转换管理状态

我会将pages 和currentPage 存储为props，无论这些值是否是Immutable.js 实例（props 是UI 的有状态部分，就像状态一样，不要让名字欺骗了你！ ）。当它们被存储为 props 时，它为组件的用户提供了一个有用的 API。

如果您使用 CSS 过渡，那么在任何给定时刻您都应该能够根据此信息呈现标记和类。

例如，给定（过度简化的标记）：

<div class=container>
  <!-- set the class to something like "inner pane2" to go to the second pane -->
  <div class=inner>
    <span class=pane>...</span>
    <span class=pane>...</span>
    <span class=pane>...</span>
  </div>
</div>

还有一些 CSS，例如：

.container {
  position: relative;
}

.inner {
  position: absolute;
  left: 0;
  transition: left 0.3s ease-in-out;
}

.pane {
  width: 100px;
}

.inner.pane2 {
  left: -100px;
}

.inner.pane3 {
  left: -200px;
}

浏览器负责对属性进行中间转换。

您通常需要知道动画何时完成，您可以使用transitionend 侦听器和isAnimating 标志（我将其存储在状态中，而不是道具中）来完成。当currentPage 改变时设置isAnimating 并在transitionend 上清除它。

您通常还需要知道您正在转换的方向，您可以使用 previousPage 属性来完成。

最后，如果你只是使用 JavaScript

在state 中保留对当前转换的引用（如果您正在使用的话，可能是用于启动动画的 jQuery 选择）。转换完成后，删除引用。如果 currentPage 在过渡期间发生变化，请在选择（或您正在使用的任何 API）上调用 .stop()。