title: How to use React TransitionMotion willEnter()
body: <p>Using <a href="https://github.com/chenglou/react-motion" rel="noreferrer">React Motion's TransitionMotion</a>, I want to animate 1 or more boxes in and out. When a box enters the view, it's width and height should go from 0 pixels to 200 pixels and it's opacity should go from 0 to 1. When the box leaves the view, the reverse should happen (width/height = 0, opacity = 0)</p>
  
  <p>I have tried to solve this problem here <a href="http://codepen.io/danijel/pen/RaboxO" rel="noreferrer">http://codepen.io/danijel/pen/RaboxO</a> but my code is unable to transition the box in correctly. The box's style jumps immediately to a width/height of 200 pixels instead of transitioning in. </p>
  
  <p>What is wrong with the code?</p>
  
  <pre><code>let Motion = ReactMotion.Motion
  let TransitionMotion = ReactMotion.TransitionMotion
  let spring = ReactMotion.spring
  let presets = ReactMotion.presets
  
  const Demo = React.createClass({
    getInitialState() {
      return {
        items: []
      }
    },
    componentDidMount() {
  
      let ctr = 0
  
      setInterval(() =&gt; {
        ctr++
        console.log(ctr)
        if (ctr % 2 == 0) {
          this.setState({
            items: [{key: 'b', width: 200, height: 200, opacity: 1}], // fade box in
          });
        } else {
          this.setState({
            items: [], // fade box out
          });
        }
  
      }, 1000)
    },
    willLeave() {
      // triggered when c's gone. Keeping c until its width/height reach 0.
      return {width: spring(0), height: spring(0), opacity: spring(0)};
    },
  
    willEnter() {
      return {width: 0, height: 0, opacity: 1};
    },
  
    render() {
      return (
        &lt;TransitionMotion
          willEnter={this.willEnter}
          willLeave={this.willLeave}
          defaultStyles={this.state.items.map(item =&gt; ({
            key: item.key,
            style: {
              width: 0, 
              height: 0,
              opacity: 0
            },
          }))}
          styles={this.state.items.map(item =&gt; ({
            key: item.key,
            style: {
              width: item.width, 
              height: item.height,
              opacity: item.opacity
            },
          }))}
          &gt;
          {interpolatedStyles =&gt;
            &lt;div&gt;
              {interpolatedStyles.map(config =&gt; {
                return &lt;div key={config.key} style={{...config.style, backgroundColor: 'yellow'}}&gt;
                  &lt;div className="label"&gt;{config.style.width}&lt;/div&gt;
                &lt;/div&gt;
              })}
            &lt;/div&gt;
          }
        &lt;/TransitionMotion&gt;
      );
    },
  });
  
  ReactDOM.render(&lt;Demo /&gt;, document.getElementById('app'));
  </code></pre>