Home

Jump to bottom Edit New page

Cheng Lou edited this page Sep 28, 2015 · 13 revisions

Normal Spring

<Spring
  defaultValue={{x: {val: 0, config: [120, 17]}}}
  endValue={{x: {val: 10, config: [120, 17]}}}>
  {style => <div style={{left: style.x.val}} />}
</Spring>

Stagger Springs

Old:

<Spring
  defaultValue={[
    {x: {val: 0, config: [120, 17]}},
    {x: {val: 10, config: [120, 17]}}
  ]}
  endValue={this.getEndValue}>
  {values =>
    <div>
      {values.map((value, i) =>
        <div key={i} style={{left: value.x.val}} />
      )}
    </div>
  }
</Spring>

TransitionSpring

Old:

<TransitionSpring
  willLeave={() => ({x: {val: 100}})}
  defaultValue={{key1: {x: {val: 0}}, key2: {x: {val: 0}}}}
  endValue={{key1: {x: {val: 10}}}}>
  {values =>
    <div>
      {Object.keys(values).map(key =>
        <div key={key} style={{left: values[key].x.val}} />
      )}
    </div>
  }
</TransitionSpring>