动画数据存储更改

Question

我有一个商店，它的数据每秒递增 1。

我想让我的组件为一个矩形设置动画，"fills horizontally" 随着数据的增加基本上如此：

0
[       ]
0.2 #conceptually
[=      ]
0.5  #conceptually
[====   ]
0.75 #conceptually
[=====  ]

问题是我的 Store 没有经过这个 'values' (0, 0.2, 0.5)，相反，它每秒递增 1。

这是我的问题 -> 存储数据不会通过中间的值，因此，如果我的组件宽度接收数据，它显然会在宽度上跳跃。

我正在考虑在渲染循环中设置状态，以便我可以手动递减状态变量。但是这是不可能的，因为我无法在渲染循环中调用 setState。

MyStore = Reflux.createStore
  init: ->
    @listenTo MyAction, @onStart

    @getAllSurvivors()
  onStart: ->
    @time = 10
    @iter true
    @trigger @survivors

  healUp: (first)->
    @time += 1 if not first

    if not timeoutID
      timeoutID = setTimeout =>
        unless @time >= 100
          timeoutID = false
          @iter false
        else
          @trigger @time
      , 
        1000

    @trigger @time


MyComp = React.createClass
  #link @state.time to store
  render: ->
      return (
        <ul>
          <li> { @state.time } </li>
          <!-- The Problem -->
          <div> This should be a loading bar as '@state.time' increments </div>
        </ul>
      );

我应该如何在 ReactJS 中处理这个问题？似乎让我的数据变为中间值（0.2、0.5 ...）是不好的，因为它更像是 UI 的东西而不是数据。

Answer 1

您的目标浏览器是什么？也许您可以使用 CSS3 快速实现您的目标？在您的 div 元素上使用它：

transition: width 2s, transform 2s;

动画数据存储更改

Animating Data Store change

reactjs

reactjs-flux

refluxjs