title: How to use a different delay for each item with React transition group?
body: <p>I am animating the entry and exit of an array of items using <code>TransitionGroup</code> and <code>CSSTransition</code> (with a fade effect). I would like the items to appear with a slight delay between them instead of all at the same time. Note that the delay can be lower than the duration of the animation. </p>
  
  <p>With my current code, all the items are fading-in at the same time (as expected). In my render function, I have the following to animate the entry and exit of my components:</p>
  
  <pre><code>&lt;TransitionGroup&gt;
      items.map((item,index) =&gt; ( 
          &lt;CSSTransition
              key={item.id}
              timeout={1000}
              classNames="fade"
                  &lt;ItemPreview item={item} /&gt;
           &lt;/CSSTransition&gt;
      ))
  &lt;/TransitionGroup&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>.fade-enter{
      opacity: 0;
      visibility: hidden;
      transition: all ease 1s;
  }
  
  .fade-enter.fade-enter-active{
      opacity: 1;
      visibility: visible;
      transition: all ease 1s;
  }
  
  .fade-exit {
      visibility: visible;
      opacity: 0;
  }
  
  .fade-exit.fade-exit-active{
      opacity: 0;
      visibility: hidden;
      transition: all ease 1s;
  }
  </code></pre>
  
  <p>How would I go about adding a different delay for each item?</p>