title: CSS transition lost when array changes
body: <p>I have a simple react app that shifts and unshifts an array of letters. The transition animation occurs when a user hits <code>next</code> and <code>back</code> button. Functionally, the array is properly changed, but the transition only works for <code>next</code>. I have a hunch that this may be an issue more basic than React, but I did make sure that the key is unique to prevent redraw.</p>
  
  <pre><code>// this is the issue.
  clickLeftRightHandler = () =&gt; {
  
      const { list } = this.state;
      // Does using slice or shifting the array cause a new redraw? Is it 
  the CSS?
      const newList = [list[list.length-1], ...list.slice(0, -1)];
  
      this.setState({list : newList});
  
  }
  </code></pre>
  
  <p>Code Link:
  <a href="https://stackblitz.com/edit/react-7nsrjg" rel="nofollow noreferrer">https://stackblitz.com/edit/react-7nsrjg</a></p>
  
  <p>Any help is appreciated! </p>