如何在react js中显示或隐藏带有过渡动画的组件

Question

我有一个名为 override 的反应组件：

function Overlay({ isOpen }) {
  if (!isOpen) return null;
  return (
    <div
      style={{
        background: "rgba(0,0,0,.7)",
        position: "fixed",
        zIndex: 1,
        top: "0",
        right: "0",
        bottom: "0",
        left: "0",
      }}
    ></div>
  );
}

它获得一个名为 isOpen 的 prop 来显示或隐藏自身。问题是它突然出现和消失，我希望它有某种像 1 秒这样的过渡，这样它就有一个出现和消失的动画。

如何将过渡动画应用到该组件？

Answer 1

我通过添加不透明度、过渡和可见性 css 样式解决了这个问题：

return (
    <div
      style={{
        background: "rgba(0,0,0,.3)",
        position: "fixed",
        zIndex: 1,
        top: "0",
        right: "0",
        bottom: "0",
        left: "0",
        opacity: !isOpen ? "0" : "1",
        transition: "all .2s",
        visibility: !isOpen ? "hidden" : "visible",
      }}
    ></div>
  );