title: How can I use React Material UI's transition components to animate adding an item to a list?
body: <p>I have this class.</p>
  <pre class="lang-js prettyprint-override"><code>class Demo extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        items: []
      };
  
      this.add = this.add.bind(this);
      this.clear = this.clear.bind(this);
    }
  
    add() {
      this.setState(prev =&gt; {
        const n = prev.items.length;
        return {
          items: [&lt;li key={n}&gt;Hello, World {n}!&lt;/li&gt;, ...prev.items]
        };
      });
    }
  
    clear() {
      this.setState({ items: [] });
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;div&gt;
            &lt;button onClick={this.add}&gt;Add&lt;/button&gt;
            &lt;button onClick={this.clear}&gt;Clear&lt;/button&gt;
          &lt;/div&gt;
  
          {/* This is wrong, not sure what to do though... */}
          &lt;Collapse in={this.state.items.length &gt; 0}&gt;
            &lt;ul&gt;{this.state.items}&lt;/ul&gt;
          &lt;/Collapse&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  <p>Sandbox link: <a href="https://codesandbox.io/s/material-demo-ggv04?file=/Demo.js" rel="noreferrer">https://codesandbox.io/s/material-demo-ggv04?file=/Demo.js</a></p>
  <p>I'm trying to make it so that every time I click the &quot;add&quot; button, a new item gets animated into existence at the top of the list and the existing items get pushed down. Not sure how to proceed though.</p>
  <p>Extra Resources</p>
  <ul>
  <li>Example of what I'm trying to achieve: <a href="https://codeburst.io/yet-another-to-do-list-app-this-time-with-react-transition-group-7d2d1cdf37fd" rel="noreferrer">https://codeburst.io/yet-another-to-do-list-app-this-time-with-react-transition-group-7d2d1cdf37fd</a></li>
  <li>React Transition Group Transition docs: <a href="http://reactcommunity.org/react-transition-group/transition" rel="noreferrer">http://reactcommunity.org/react-transition-group/transition</a> (which seem to be used internally by <code>Collapse</code>)</li>
  </ul>