title: Adding transitions to styled components
body: <p>I have following component in React:</p>
  
  <pre><code>const Button = styled.div`
          width: 30px;
          height: 30px;
          position: absolute;
          right: 2em;
          top: 50%;
          transform: translateY(-50%);
          padding: 0;
          margin: 0;
  
          &amp;::before,
          &amp;::after {
            content: "";
            position: absolute;
            background-color: #3d3935;
            transition: transform 0.25s ease-out;
          }
  
          &amp;::before {
            top: 0;
            left: 50%;
            width: 4px;
            height: 100%;
            margin-left: -2px;
          }
  
          &amp;::after {
            top: 50%;
            left: 0;
            width: 100%;
            height: 4px;
            margin-top: -2px;
          }
  `;
  </code></pre>
  
  <p>It just renders a component with library <strong>Styled-components</strong>. It basically shows a <code>+</code> sign.</p>
  
  <p>But then, I would like to rotate each of the lines separately, using:</p>
  
  <pre><code>    &amp;::before {
        transform: rotate(${this.state.expanded ? '0' : '45'}deg);
      }
      &amp;::after {
        transform: rotate(${this.state.expanded ? '0' : '135'}deg);
      }
  </code></pre>
  
  <p><strong>And</strong> it works great, but unfortunately there are no transitions (it happens immediately). Tried to include transitions in each of these lines, but it still doesn't affect the changes.</p>
  
  <p>Another solution which I've tried was to add a class, e.g. <code>rotated</code>:</p>
  
  <pre><code>    &amp;.rotated::before {
        transform: rotate(45deg);
      }
  </code></pre>
  
  <p><strong>But</strong> styled components doesn't provide actually possibility to change classes dynamically using just it's logic.</p>
  
  <p>Looking forward for any kind of help, thank you.</p>