title: Can't animate modal on ReactJS
body: <p>I'm currently creating my custom implementation of a modal. All works perfectly fine so far but I can't seem to animate it and I can't get my head around it.</p>
  <p>This is my Modal component</p>
  <pre><code> import React from 'react'
  import Slider from './Slider'
  import {IoIosCloseCircleOutline} from &quot;react-icons/io&quot;
  import styled from &quot;styled-components&quot;;
  
  
  
  export default function Modal(props) {
  
      const Modal = styled.div `
      transform: translateX(${({animateSlideInRight}) =&gt; (animateSlideInRight ? &quot;0&quot; : &quot;100vw&quot;)});
      transition: transform 1s;
      width: 1000px;
      height: 650px;
      z-index: 100;
      position: fixed;
      background: white;
      transition: all 1.1s ease-out;
      box-shadow: 
        -2rem 2rem 2rem rgba(black, 0.2);
      visibility: visible;
      display: flex;
      border-bottom-right-radius: 100px;
      `
  
      const closeModal = () =&gt; {
          props.setShow(false)
      }
  
      const data = props.data
      if (!props.show) {
          return null
      }
      return (
          &lt;div className=&quot;modalWrapper&quot;&gt;  
              &lt;Modal className=&quot;modal&quot; id=&quot;modal&quot; animateSlideInRight = {props.show}&gt;
                  &lt;div className=&quot;modalHeaderWrapper&quot;&gt;
                  &lt;IoIosCloseCircleOutline className=&quot;modalCloseCross&quot; onClick={closeModal}/&gt;
                      &lt;img src={data[0].logo} alt=&quot;logo&quot; /&gt;
                      &lt;h2&gt;{data[0].title}&lt;/h2&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;modalRightFlex&quot;&gt;
                      &lt;Slider 
                          images={[data[0].image1Carrousel, data[0].image2Carrousel, data[0].image3Carrousel]}
                      /&gt;
                      &lt;div className=&quot;modalRightDescription&quot;&gt;
                          &lt;h1&gt;Description&lt;/h1&gt;
                          &lt;p&gt;{data[0].description}&lt;/p&gt;
                          &lt;h1&gt;Technologies&lt;/h1&gt;
                          &lt;div className=&quot;modalTechnologiesWrapper&quot;&gt;
                              {data[0].technologiesUsed.map((image) =&gt; {
                                  return &lt;img src={image}/&gt;
                              })}
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/Modal&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>As you see my modal is a <code>styledComponent</code> that defines whether to translate in X or not depending on the show state. In my scenario I had to lift up state since I'm opening this modal from clicking on a card which in itself is a different component, so their ancestor is taking care of the states.</p>
  <p>My current CSS for modal is as seen in the styled div.</p>
  <p><strong>Things I have tried</strong></p>
  <p>1-tried having a regular div and handle the animation through CSS with keyframes --&gt; It works for sliding in but it doesn't when I close (in that instance I had my show state defining a class name for the modal with a different animation for each of them)</p>
  <p>2-tried to set a animate state and define the <code>className</code> based on whether that state is true or false. It works the first time when I close (despite having to introduce a timeout of the animation duration between setting animate to false and show to false) but then it goes bonkers and starts flickering everywhere.</p>
  <p>Anyway someone can see the issue? Many thanks</p>
  <p><strong>edit</strong>
  Sanbox link: <a href="https://codesandbox.io/s/trusting-shape-vxujw" rel="nofollow noreferrer">https://codesandbox.io/s/trusting-shape-vxujw</a></p>