title: React CSS Translate Transition not working
body: <p>I am trying to animate a side menu, but for some reason it just wont work!</p>
  <p>I read on a few answers that using a map to map the <code>&lt;li&gt;</code> items could be the issue (and I have tried with just a few items with static text), but that doesnt seem to be the problem.</p>
  <p>Additionally, I have also put the generated items into a state, and wrapped the set with an useEffect to prevent retriggering of the map, still doesn't work. Only the transition is not working, the menu is appearing where it must appear, closes itself when I click the menu button, etc.</p>
  <p><strong>EDIT</strong>: I think it is worth mentioning that while working on it on my development server, when I am updating my css file (its not refreshing the page), when I change some of the styles that make the sidebar move, it moves with animation, so the animation is there, it is just not working when I am clicking the open/close button but it just appears instantly.</p>
  <p>P.S. <code>uuid()</code> generates unique key for each element, so that is not an issue either.</p>
  <pre><code>export default function SideBar({ names, closeSidebarOnClick, show }) {
    const [robots, setRobots] = useState();
  
    useEffect(() =&gt; {
      setRobots(GenerateNavItems());
    }, names);
  
    function GenerateNavItems() {
      return names.map((robotName) =&gt; {
        return (
          &lt;li key={uuid()} className={`nav-item`} onClick={() =&gt; {closeSidebarOnClick();}}&gt;
            {robotName}
          &lt;/li&gt;
        );
      });
    }
        
    return (
      &lt;nav className={`sidebar ${show ? &quot;show-sidebar&quot; : &quot;&quot;}`}&gt;
        &lt;ul&gt;{robots}&lt;/ul&gt;
      &lt;/nav&gt;
    );
  }
  </code></pre>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.nav-item {
    padding-left: 15px;
    text-decoration: none;
    font-weight: bold;
  }
  
  .nav-item:hover {
    color: red;
    cursor: pointer;
  }
  
  .toggle-sidebar-button {
    user-select: none;
    cursor: pointer;
    padding-left: 1.5rem;
    padding-top: 0.5rem;
    border: none;
    background: transparent;
    z-index: 300;
    /* z-index: 50; */
  }
  
  .toggle-sidebar-button:active {
    border: none;
  }
  
  .toggle-sidebar-button-line {
    width: 35px;
    height: 5px;
    background-color: black;
    margin: 6px 0;
  }
  
  .sidebar {
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    z-index: 200;
    background-color: white;
    transform: translateX(-100%);
    transition: transform 1s ease;
  }
  
  .sidebar.show-sidebar {
    transform: translateX(0);
  }
  
  .sidebar ul {
    height: 100%;
    list-style: none;
    padding-left: 3rem;
    padding-top: 3rem;
    display: flex;
    flex-direction: column;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="root"&gt;
    &lt;div class="content row"&gt;
      &lt;div class="toggle-sidebar-button"&gt;
        &lt;div class="toggle-sidebar-button-line"&gt;&lt;/div&gt;
        &lt;div class="toggle-sidebar-button-line"&gt;&lt;/div&gt;
        &lt;div class="toggle-sidebar-button-line"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;nav class="sidebar "&gt;
        &lt;ul&gt;
          &lt;li class="nav-item"&gt;ROBOT 1&lt;/li&gt;
          &lt;li class="nav-item"&gt;ROBOT 2&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;div class="rendered-robot col"&gt;
        &lt;div&gt;CHOOSE ROBOT&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>