Question

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

我想让我的组件为一个矩形设置动画，即＃34;水平填充＆＃34;因为数据基本上增加了：

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

问题是我的商店没有经历这个＆＃39;价值观＆＃39; （0,0.2,0.5），相反，它每秒递增1。

那是我的问题 - ＆gt;商店数据不会通过它们之间的值，因此，如果我的组件宽度接收数据，它显然只会跳入宽度。

我想在渲染循环中设置状态，以便我可以手动递减状态变量。但是这是不可能的，因为我无法在渲染循环中调用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;

动画数据存储更改

1 个答案: