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

Question

我有一个叫覆盖的反应组件：

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 的道具来显示或隐藏。问题是它突然出现和消失，我希望它有某种过渡，比如 1 秒，所以它有出现和消失的动画。

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

Answer 1

添加过渡属性：

style={{ ..., transition: "<property> <duration> <movement-pattern>" }}

例如：

style={{ ..., transition: "right 1s ease-in-out" }}

如果您想将过渡应用到所有属性（不推荐），请使用 all 作为 <property>。

在你的情况下，听起来你想让道具切换一个具有 css 规则 opacity: 0; 和转换规则 transition: "opacity 1s ease-in-out" 的类“opacity-zero”。

更多关于转换的信息：https://www.w3schools.com/css/css3_transitions.asp

Answer 2

使用不透明度代替display: none。您将能够转换它。

setInterval(() => {
  document.querySelector('.box').classList.toggle('hide')
}, 1000)

.box {
  transition: opacity 0.5s ease-in;
  background: crimson;
  color: white;
  opacity: 1;
  padding: 5px 10px;
  display: inline-block;
  font-family: Arial;
}

.hide {
  opacity: 0;
}

<div class="box hide">This is a div</div>

如果您不希望组件的外观突然替换它之后的元素，我建议始终渲染它，但保持它不可见。这就是它的样子：

setInterval(() => {
  document.querySelector('.box').classList.toggle('hide')
}, 1000)

.box, .box2 {
  transition: opacity 0.5s ease-in;
  background: crimson;
  color: white;
  opacity: 1;
  padding: 5px 10px;
  width: fit-content;
  font-family: Arial;
}

.hide {
  opacity: 0;
}

.box2 {
  background: steelblue;
}

.container {
  display: flex;
  flex-direction: column;
}

<div class="container">
<div class="box2"> This is also a div. It will be static </div>
<div class="box hide">This is a div</div>
<div class="box2"> This is also a div. It will be static </div>
<div class="box2"> This is also a div. It will be static </div>
</div>

如果您不想预渲染它，那么您必须在动画中将渲染与过渡结合起来。

setInterval(() => {
  document.querySelector('.box').classList.toggle('hide')
}, 1000)

.box {
  animation: fade-in 0.5s ease-in;
  background: crimson;
  color: white;
  padding: 5px 10px;
  width: fit-content;
  font-family: Arial;
}

.hide {
  display: none;
}

.box2 {
  background: steelblue;
  color: white;
  padding: 5px 10px;
  width: fit-content;
  font-family: Arial;
}

@keyframes fade-in {
  0% { opacity: 0 }
  100% { opacity: 1 }
}
  

.container {
  display: flex;
  flex-direction: column;
}

<div class="container">
<div class="box2"> This is also a div. It will be static </div>
<div class="box hide">This is a div</div>
<div class="box2"> This is also a div. It will be static </div>
<div class="box2"> This is also a div. It will be static </div>
</div>

如果想让外观更加无缝，可以在动画中操纵 div 的高度：

setInterval(() => {
  document.querySelector('.box').classList.toggle('hide')
}, 1000)

.box {
  animation: fade-in 0.5s ease-in;
  background: crimson;
  color: white;
  padding: 5px 10px;
  width: fit-content;
  font-family: Arial;
}

.hide {
  display: none;
}

.box2 {
  background: steelblue;
  color: white;
  padding: 5px 10px;
  width: fit-content;
  font-family: Arial;
}

@keyframes fade-in {
  0% { opacity: 0; height: 0; }
  100% { opacity: 1; height: 21px; }
}
  

.container {
  display: flex;
  flex-direction: column;
}

<div class="container">
<div class="box2"> This is also a div. It will be static </div>
<div class="box hide">This is a div</div>
<div class="box2"> This is also a div. It will be static </div>
<div class="box2"> This is also a div. It will be static </div>
</div>

Answer 3

我通过添加不透明度和过渡以及可见性 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>
  );