Animating Data Store change

Question

I have a store which increments its data by 1 every second.

I want my component to animate a rectangle, that "fills horizontally" as the data increments so basically:

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

The problem is my Store does not go through this 'values' (0, 0.2, 0.5), instead, it increments by 1 every second.

That's my problem -> the store data does not go through the value in between, therefore, if my component width takes in the data, it obviously will just jump in width.

I'm thinking of setting state in the render loop so that I can manually decrement a state variable. However this is not possible as I cannot call setState inside the render loop.

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>
      );

How should I handle this in ReactJS? It seems that making my data go to the intermediate values (0.2, 0.5...) is bad as it's more of a UI thing than data.

Answer 1

What browsers do you target? Probably you can achieve your goal fast with CSS3? Use this on your div element:

transition: width 2s, transform 2s;