React animation inline styling

Question

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

You can use ReactTransitionGroup to make your own component that does the same thing ReactCSSTransitionGroup does, but with inline styles. — Hakob Sargsyan
– Hakob Sargsyan, Commented Sep 23, 2022 at 6:27

Garo Gabrielyan · Accepted Answer · 2022-09-23 09:17:34Z

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 transitions = ["linear", "ease", "ease-in", "ease-out", "ease-in-out"];
      const [opacity, setOpacity] = useState(0);
      const [right, setRight] = useState(40);
      const speed = 0.5;
    
      return (
        <>
          <button
            onClick={() => {
              setOpacity(opacity ? 0 : 1);
              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 ${transitions[1]} ${speed}s`,
              transform: `translateX(-${right}%)`
            }}
          >
            <p style={{ margin: "0px" }}>animation</p>
          </div>
          )
        </>
      );
    }

Viktor Luft · Accepted Answer · 2022-09-23 06:29:23Z

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/

Collectives™ on Stack Overflow

React animation inline styling

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related