How to put one div onto another with transition?-CodePudding

I want to create something such that, depending on the state, a given div appears overlapping another div from the right side, here is my code:

  const [loggedIn, setLoggedIn] = useState<boolean>(false);
  const [hasConfirmedAccount, setHasConfirmedAccount] = useState<boolean>(false);

  return (
    <>
      <div style={{ width: "100%" }}>
        <div style={{ float: "left", width: "50%" }}>
          <div
            style={{ width: "100%", height: "100vh", backgroundColor: "#fafafafa" }}
          ></div>
        </div>

        <div id='notLoggedIn' style={{ float: "right", width: "50%" }}>
          {!loggedIn && (
            <div>
                WHEN LOGGED IN === TRUE
            </div>
          )}

          <div
            style={
              loggedIn && !hasConfirmedAccount 
                ? { width: "100%", transition: "ease-in-out 5s" }
                : { display: "none" }
            }
          >
            <div id="notConfirmedAccount">WHENE LOGGED IN === TRUE AND hasConfirmedAccount === FALSE</div>
          </div>
        </div>
      </div>
    </>
  );

The code works fine, when loggedIn === true and hasConfirmedAccount === false div with id = notConfirmedAccount has been displayed instead of div with id=notLoggedIn, but displaying this div does not work flowing, I want a slow leaving effect of the div on the right side that would overlap the previous div

can someone tell me what to do this?

thanks for any help!

CodePudding user response：

install animate.css => $ npm install animate.css --save animate.css

2.import "./animate.css" at top your component or project

3.just put the name of aniamte on className like this pattern in your div

<div className={style.forgot} className='animate__animated animate__fadeInDown'>

also you should control your showing div with state

CodePudding user response：

Use React animation Add-Ons ReactTransitionGroup and ReactCSSTransitionGroup

The ReactTransitionGroup add-on component is a low-level API for animation, and ReactCSSTransitionGroup is an add-on component for easily implementing basic CSS animations and transitions.

https://reactjs.org/docs/animation.html