如何通过过渡将一个div放到另一个div上？答案

【问题标题】：How to put one div onto another with transition?如何通过过渡将一个div放到另一个div上？
【发布时间】：2022-01-15 19:29:57
【问题描述】：

我想创建一些东西，根据状态，给定的 div 从右侧与另一个 div 重叠，这是我的代码：

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

代码工作正常，当 loggedIn === true 和 hasConfirmedAccount === false div 与 id = notConfirmedAccount 已显示而不是 div 与 id=notLoggedIn，但显示此 div 不起作用流动，我想要 div 的缓慢离开效果在与前一个 div 重叠的右侧

谁能告诉我该怎么做？

感谢您的帮助！

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

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

2.在组件或项目顶部导入“./animate.css”

3.只需将 anianmte 的名称放在 className 上，就像您的 div 中的这种模式一样

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

你也应该用状态控制你的显示 div

【讨论】：

【解决方案2】：

使用 React 动画插件 ReactTransitionGroup 和 ReactCSSTransitionGroup

ReactTransitionGroup 附加组件是一个用于动画的低级 API，而 ReactCSSTransitionGroup 是一个附加组件，用于轻松实现基本的 CSS 动画和过渡。

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

【讨论】：