title: How do you add a transition on transform with Styled-components?
body: <p>I try to create a <code>transition</code> on the <code>transform</code> property.
  but it doesn't effect any changes.</p>
  
  <p>I checked other properties like: <code>background-color</code>, <code>color</code>... and it works fine.</p>
  
  <p><strong><em>live code</em></strong>: <a href="https://ueeieiie.github.io/styled-transition-transform/dist/" rel="nofollow noreferrer">https://ueeieiie.github.io/styled-transition-transform/dist/</a></p>
  
  <p><strong><em>source code</em></strong>: </p>
  
  <pre><code>// styled-component wrapper
  const Red = styled.div`
      width: 100%;
      height: 100%;
      background-color: red;
      flex: 0 0 100%; 
      transition: transform 500ms ease;
      transform: translate(${
          props =&gt; props.onStart ? '0' : '100px'
      });
  `;
  
  // the button that changes the state and makes the effect
  const Changer = (props) =&gt; {
      const Button = styled.div`
          position:absolute;
          background: black;
          width: 100px;
          height: 60px;
          cursor: pointer;
      `;
  
      const onClickHandler = () =&gt; { props.toggleOnStart() }
  
      return &lt;Button onClick={onClickHandler}&gt;Change!&lt;/Button&gt;
  }
  
  // App wrapper component
  class App extends React.Component {
      state = { onStart: true };
  
      toggleOnStart = () =&gt; { this.setState({onStart: !this.state.onStart}) }
  
      render(){
          const Wrapper = styled.div`
              width: 100%;
              height: 100%;
              background: gray;
              display: flex;
              overflow:hidden;
              position: relative;
          `;
  
          return (
              &lt;Wrapper&gt;
                  &lt;Changer toggleOnStart={this.toggleOnStart} /&gt;
                  &lt;Red onStart={this.state.onStart} /&gt;
              &lt;/Wrapper&gt;
          );
      }
  }
  </code></pre>