Анимация данных Изменение хранилища

Question

У меня есть магазин, который увеличивает его данные на 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> 
    ); 

Как я должен справиться с этим в ReactJS? Кажется, что мои данные переходят к промежуточным значениям (0.2, 0.5 ...), так как это скорее пользовательский интерфейс, чем данные.

Answer 1

В каких браузерах вы нацеливаетесь? Возможно, вы можете быстро достичь своей цели с помощью CSS3? Используйте это на элементе div:

transition: width 2s, transform 2s;