React animation inline styling-CodePudding

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. This is the animation I want to do it. I shared my code in code-sandbox.

This is my code

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>
      )}
    </>
  );
}

CodePudding user response：

You could use the inlined styles, but you cannot achieve the desired behavior without the use of CSS or a third party library doing the animations for you.

I would recommend to check out this: https://www.w3schools.com/css/css3_animations.asp

Another problem that I see:

You are displaying the content only as soon as the "toggle" property is true, but for animations you need to have different states in your markup in order to transition to different states of animation.

E.g.

<div className="opening">
<div className="opened">
<div className="closing">
<div className="closed"> (or removed from DOM)

Then you can apply the CSS @keyframes to all different stages using the corresponding CSS selectors.

Or if you don't want to dig into CSS yourself. You can use e.g. this library to do the job: https://react-spring.dev/

CodePudding user response：

I don't think that this is a good idea, but here is one solution. You can control everything.

import "./styles.css";

import { useState } from "react";

export default function App() {
  const [opacity, setOpacity] = useState(0);
  const [right, setRight] = useState(40);
  const speed = 0.5;

  return (
    <>
      <button
        onClick={() => {
          setOpacity((prev) => (prev === 0 ? 1 : 0));
          setRight((prev) => (prev === 40 ? 20 : 40));
        }}
      >
        toogle button
      </button>
      <div
        style={{
          display: "flex",
          zIndex: 1,
          marginLeft: 170,
          background: "red",
          width: 200,
          height: 300,
          opacity,
          backgroundColor: "tomato",
          transition: `all ease-in-out ${speed}s`,
          transform: `translateX(-${right}%)`
        }}
      >
        <p style={{ margin: "0px" }}>animation</p>
      </div>
      )
    </>
  );
}