title: Jerky movement in react-spring transition between two divs
body: <p>I am using <code>react-spring</code> to create animations for "additional info" box with for an item selected by the user. Following the <a href="https://codesandbox.io/embed/1y3yyqpq7q" rel="nofollow noreferrer">Simple Transition Demo</a> from the documentation. I came up with an version for my use case:</p>
  
  <pre><code>const Display = ({ item }) =&gt; (item ? &lt;p&gt;Index #{item}&lt;/p&gt; : &lt;div /&gt;);
  
  const AnimatedDisplay = ({ item }) =&gt; {
    const transitions = useTransition(item, i =&gt; i, {
      from: { transform: "translate3d(150%, 0,0)", opacity: 0 },
      enter: { transform: "translate3d(0%, 0,0)", opacity: 1 },
      leave: { transform: "translate3d(-150%,0, 0)", opacity: 0 }
    });
  
    return (
      &lt;div className="ui"&gt;
        {transitions.map(({ item: i, key, props }) =&gt; (
          &lt;animated.div key={key} style={props}&gt;
            &lt;Display item={i} /&gt;
          &lt;/animated.div&gt;
        ))}
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p><a href="https://codesandbox.io/embed/react-spring-jerky-movement-veb4c?fontsize=14" rel="nofollow noreferrer">Example in CodeSandbox.io</a></p>
  
  <p>In the example clicking <code>Select</code> simulates clicking on a random item and <code>Clear</code> simulates selecting no item. When you click <code>Select</code> and <code>Clear</code> it behaves as I intended. </p>
  
  <p>The problem I am trying to solve is when you press <code>Select</code> twice the second item enters and moved toward the first but stops short of the final position and jerks forward at the end. From other stack overflow answers it seems that some aspect of the first div is still being rendered. My assumption is this is an issue with how I have the CSS laid out but I cannot figure out what I should be doing differently:</p>
  
  <pre><code>.ui {
    width: 100%;
  
    display: inline-flex;
    justify-content: center;
  }
  </code></pre>
  
  <p>I've tried several iteration with and without the flex, but the issue is exactly the same. Can anyone tell what I am doing wrong in this example?</p>