title: simple css animation not working on dynamic reactjs element
body: <p>Check the snippet at codepen <a href="http://codepen.io/anon/pen/EZJjNO" rel="nofollow noreferrer">http://codepen.io/anon/pen/EZJjNO</a>
  Click on Add button, it will add another item but its appearing immediately without any fade effect. </p>
  
  <p>JS:</p>
  
  <pre><code>class App extends React.Component {
    constructor(props) {
      super(props);
      this.addItem = this.addItem.bind(this);
  
      this.state = {
        items: [1,2,3]
      }
    }
  
    addItem() {
      var items = this.state.items;
      items.push(4);
      this.setState({
        items: items
      })
    }
    render() {
      return (
        &lt;div className="App"&gt;
          {
            this.state.items.map(function(i) {
              return &lt;div className="item fade"&gt;Testing&lt;/div&gt;
            })
          }
          &lt;button onClick={this.addItem}&gt;Add&lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  
  React.render(&lt;App /&gt;, document.body);
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.App {
    background-color: rgba(0,0,0, 0.5);
    text-align: center;
    height: 100vh;
  }
  div.item {
    border: 1px solid #ccc;
    padding: 10px;
    background: #123456;
    color: #fff;
    opacity: 0;
    transition: all 0.4s ease-out;
  }
  .fade {
    opacity: 1 !important;
  }
  </code></pre>