title: React animation inline styling
body: <p>I am practicing React inline animation styling. I have made one toggle button, when user press button first time, I want pop up animated card from left to right. when user press button 2nd time it will close the card from right to left. I want to learn how the animation work inline react styling. Unfortunately I am unable to do that. Seems like React inline styling, transitions and translate does not work to me. <a href="https://i.stack.imgur.com/FbNDz.gif" rel="nofollow noreferrer">This is the animation I want to do it</a>. I shared my code in <a href="https://codesandbox.io/s/gracious-forest-ugxdgj?file=/src/App.tsx" rel="nofollow noreferrer">code-sandbox</a>.</p>
  <p><strong>This is my code</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { useState } from "react";
  
  export default function App() {
    const [toggle, setToggle] = useState(false);
    return (
      &lt;&gt;
        &lt;button onClick={(): void =&gt; setToggle(!toggle)}&gt;toogle button&lt;/button&gt;
        {toggle &amp;&amp; (
          &lt;div
            style={{
              display: "flex",
              zIndex: 1,
              marginLeft: 170,
              background: "red",
              width: 200,
              height: 300,
              opacity: 1,
              backgroundColor: "tomato",
              transition: "opacity 5s"
            }}
          &gt;
            &lt;p style={{ margin: "0px" }}&gt;animation&lt;/p&gt;
          &lt;/div&gt;
        )}
      &lt;/&gt;
    );
  }</code></pre>
  </div>
  </div>
  </p>