Reactjs 设置数据存储更改的动画

我有一个每秒钟增加1个数据的存储

我希望我的组件设置一个矩形的动画，随着数据的增加，“水平填充”，因此基本上：

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

问题是我的存储没有经过这个“值”（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>
      );

MyStore=reflow.createStore
初始化：->
@listenTo MyAction，@onStart
@GetAllSurvives（）
onStart:->
@时间=10
@iter真实
@触发@幸存者
希卢普：（第一）->
@如果不是第一次，则时间+=1
如果不是超时ID
timeoutID=setTimeout=>
除非@time>=100
timeoutID=false
@iter假
其他的
@触发@时间
, 
1000
@触发@时间
mycop=React.createClass
#link@state.time to store
渲染：->
返回(

{@state.time}
这应该是一个加载条，以“@state.time”为增量

);

---

我应该如何在ReactJS中处理这个问题？似乎让我的数据进入中间值（0.2，0.5…）是不好的，因为这更像是一个用户界面而不是数据。

你的目标浏览器是什么？也许你可以通过CSS3快速实现你的目标？在div元素上使用此选项：

transition: width 2s, transform 2s;

---

是，并使用

width:this.state.width+“%”

或您正在使用的任何状态变量设置元素的样式。