Exploring the world of React inline animation styling, I set out to create a toggle button. The goal was simple: when the user presses the button for the first time, I wanted a pop-up animated card to slide from left to right. On the second press, the card should gracefully close by sliding from right to left. Eager to understand how animations work with inline React styling, I ran into some difficulties. Unfortunately, it seems that React inline styling, transitions, and transforms are not cooperating as expected. Here is the desired animation. You can find my code on code sandbox.
Check out my code snippet:
import { useState } from "react";
export default function App() {
const [toggle, setToggle] = useState(false);
return (
<>
<button onClick={(): void => setToggle(!toggle)}>toogle button</button>
{toggle && (
<div
style={{
display: "flex",
zIndex: 1,
marginLeft: 170,
background: "red",
width: 200,
height: 300,
opacity: 1,
backgroundColor: "tomato",
transition: "opacity 5s"
}}
>
<p style={{ margin: "0px" }}>animation</p>
</div>
)}
</>
);
}